Làm thế nào ngăn chặn nhiều bản sao của phản ứng từ tải?

Question

Trong ứng dụng Meteor trước đây của tôi, sử dụng browserify và React, tất cả đều hoạt động cho đến khi tôi chuyển sang meteor webpack.

tôi sử dụng trong các ứng dụng react-select sao băng của tôi và nó làm việc rất lớn nhưng với browserify tôi có thể ngăn chặn nhiều bản sao của phản ứng từ tải, giúp ngăn chặn lỗi này tôi bây giờ có:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

package.json tôi nhìn này :

... 

"dependencies": { 
    "classnames": "^2.1.3", 
    "lodash": "^3.10.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-mixin": "^2.0.1", 
    "react-select": "^1.0.0-beta8" 
    }, 

... 

Có cấu hình trong webpack mà tôi có thể sử dụng thứ gọi là externals không? Không hoàn toàn chắc chắn rằng điều đó có nghĩa nhưng một bình luận nói để sử dụng:

externals: { 
    'react': 'React', 
    'react-dom': 'ReactDOM' 
} 

Answer 1

Vì bạn sử dụng webpack, bạn có thể thêm một bí danh cho tải phản ứng, như thế này:

// In webpack.config.js 

    resolve: { 
    alias: { 
     react: path.resolve('node_modules/react'), 
    }, 
    }, 

này ngăn chặn các lỗi addComponentAsRefTo(...) và đã xây dựng thành công của chúng tôi một lần nữa. Tuy nhiên, vì một số lý do, việc xây dựng thử nghiệm không thành công chỉ trên môi trường CI của chúng tôi vì nó không thể giải quyết đường dẫn node_modules/react. Tôi nghĩ rằng nó không chắc rằng bạn sẽ gặp phải vấn đề này cụ thể, mặc dù.

Answer 2

Cái gì mà làm việc cho tôi là:

Gỡ bỏ tất cả các gói cài đặt trên toàn cầu liên quan đến phản ứng (tạo-phản ứng ứng dụng, phản ứng bản địa, phản ứng và vân vân)

thì: rm -rf node_modules

sau đó: sử dụng npm install thay vì cài đặt sợi

xem xét một ứng dụng được tạo bằng ứng dụng phản ứng thùng và bị đẩy ra

Answer 3

Trong trường hợp của tôi, tôi đã xây dựng một mô-đun npm riêng biệt, sau đó bao gồm nó như một thư viện trong một dự án khác tại địa phương sử dụng npm link ../some-library. Một trong các mô-đun trong thư viện đó gây ra lỗi này khi tôi chạy dự án mẹ.

Khi tôi gặp phải lỗi này, giải pháp cho tôi là ngăn chặn phản ứng và phản ứng-dom khỏi việc đưa vào kết quả gói thư viện, bằng cách thêm phần sau vào module.exports của webpack.config.js của nó :

externals: { 
    react: 'react', 
    'react-dom': 'react-dom' 
}