"mô-đun không tìm thấy: Lỗi: Không thể giải quyết mô-đun 'phản ứng/lib/ReactMount'"

Question

Tôi đã sử dụng Reactj và webpack để bắt đầu dự án và khi tôi chạy "máy chủ nút" trong dấu nhắc lệnh, có lỗi như này:

Và chrome explorer mở thành công nhưng cũng có vấn đề như sau:

các github là: (github.com/Yangqin0607/gallery)

Đây là package.json

{ 
    "private": true, 
    "version": "0.0.1", 
    "description": "YOUR DESCRIPTION - Generated by generator-react-webpack", 
    "main": "", 
    "scripts": { 
    "clean": "rimraf dist/*", 
    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist", 
    "dist": "npm run copy & webpack --env=dist", 
    "lint": "eslint ./src", 
    "posttest": "npm run lint", 
    "release:major": "npm version major && npm publish && git push --follow-tags", 
    "release:minor": "npm version minor && npm publish && git push --follow-tags", 
    "release:patch": "npm version patch && npm publish && git push --follow-tags", 
    "serve": "node server.js --env=dev", 
    "serve:dist": "node server.js --env=dist", 
    "start": "node server.js --env=dev", 
    "test": "karma start", 
    "test:watch": "karma start --autoWatch=true --singleRun=false" 
    }, 
    "repository": "", 
    "keywords": [], 
    "author": "Your name here", 
    "devDependencies": { 
    "babel-core": "^6.0.0", 
    "babel-eslint": "^6.0.0", 
    "babel-loader": "^6.0.0", 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.0.15", 
    "babel-preset-react": "^6.0.15", 
    "babel-preset-stage-0": "^6.5.0", 
    "bower-webpack-plugin": "^0.1.9", 
    "chai": "^3.2.0", 
    "copyfiles": "^1.0.0", 
    "css-loader": "^0.23.0", 
    "eslint": "^3.0.0", 
    "eslint-loader": "^1.0.0", 
    "eslint-plugin-react": "^6.0.0", 
    "file-loader": "^0.9.0", 
    "glob": "^7.0.0", 
    "isparta-instrumenter-loader": "^1.0.0", 
    "karma": "^1.0.0", 
    "karma-chai": "^0.1.0", 
    "karma-coverage": "^1.0.0", 
    "karma-mocha": "^1.0.0", 
    "karma-mocha-reporter": "^2.0.0", 
    "karma-phantomjs-launcher": "^1.0.0", 
    "karma-sourcemap-loader": "^0.3.5", 
    "karma-webpack": "^1.7.0", 
    "minimist": "^1.2.0", 
    "mocha": "^3.0.0", 
    "null-loader": "^0.1.1", 
    "open": "0.0.5", 
    "phantomjs-prebuilt": "^2.0.0", 
    "react-addons-test-utils": "^15.0.0", 
    "react-hot-loader": "^1.2.9", 
    "rimraf": "^2.4.3", 
    "style-loader": "^0.13.0", 
    "url-loader": "^0.5.6", 
    "webpack": "^1.12.0", 
    "webpack-dev-server": "^1.12.0" 
    }, 
    "dependencies": { 
    "core-js": "^2.0.0", 
    "normalize.css": "^4.0.0", 
    "react": "^15.0.0", 
    "react-dom": "^15.0.0" 
    } 
} 

Answer 1

Vấn đề này có liên quan đến gói react-hot-loader. Bạn đang sử dụng phiên bản cũ dựa trên tệp ReactMount.js có trong thư mục node_modules/react/lib.

Không có dễ dàng sửa chữa một cách, nhưng cho rằng bạn có một vài lựa chọn đó là:

1. Cố gắng làm theo hướng dẫn ở đây: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (nhưng tôi đã không may mắn cho đến nay)

2. tháo reloader nóng cho phản ứng (trong webpack.config bạn loại bỏ các 'react-hot' loader)

3. cập nhật gói react-hot-loader lên phiên bản 3 (ở đây là làm thế nào để làm như vậy: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). Nhưng lưu ý rằng gói này đã được alpha trong một thời gian bây giờ ...

4. Rollback phiên bản phản ứng của bạn thành một bao gồm ReactMount.js trong thư mục lib (15.0.1 được sử dụng để có tệp này không chắc chắn khi nó dừng lại) .

Cập nhật: Phản ứng nóng Loader 3 hiện đang ở phiên bản beta với một hướng dẫn nâng cấp toàn diện hơn: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30

Answer 2

Đây có lẽ chỉ là một vấn đề phụ thuộc. Hoặc là không nhận được phiên bản phản ứng chính xác hoặc không cài đặt đúng cách.

# update npm 
$ npm install -g npm 

# reinstall the generator-react-webpack package (note the global tags) 
$ npm install -g yo 
$ npm install -g generator-react-webpack 

Sau đó cố gắng tạo ứng dụng của bạn.

Answer 3

Bạn đang sử dụng gói react-hot-loader lỗi thời sử dụng phản hồi nội bộ api throught react\lib\ReactMount. Bây giờ phản ứng không cho phép điều này do đó vấn đề.

Thử cập nhật lên phiên bản mới nhất:

$ npm install --save-dev react-hot-loader@latest 

Answer 4

Cảm ơn bạn cho tất cả các câu trả lời của bạn. Tôi đã giải quyết được vấn đề của mình.

" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.

Vì vậy, đây là giải pháp cho tôi: 1) cập nhật các phản ứng nóng-loader lên phiên bản mới nhất

npm install --save-dev react-hot-loader@latest 

nhưng đây là một vấn đề khác liên kết với phản ứng nóng-loader

2) vì vậy tôi loại bỏ các phản ứng nóng-loader từ 'cfg/dev.js' thay đổi mã

loader: 'react-hot!babel-loader' 

vào

loader: 'babel-loader' 

Answer 5

Nhiều nhờ cheesemacfly, tôi đã có thể giải quyết vấn đề tương tự với đề nghị của bạn để loại bỏ 'phản ứng nóng' từ bộ nạp.

{ 
    test: /\.(js|jsx)$/, 
    loaders: ['react-hot', 'babel'], 
    exclude: /(node_modules|lib\/ckeditor)/ 
} 

tôi thay đổi để:

{ 
    test: /\.(js|jsx)$/, 
    loader: 'babel', 
    exclude: /(node_modules|lib\/ckeditor)/ 
} 

Hãy nhớ thay đổi từ 'bộ tải' thành 'nạp' kể từ khi bạn không còn tham khảo một danh sách.

Answer 6

Không có giải pháp nào ở trên phù hợp với tôi. Đã dành phần còn lại của ngày trong một lỗ thỏ của các vấn đề/nhận xét github, cân nhắc ưu/nhược điểm/tính khả thi của các cách giải quyết khác nhau.

Các nhanh nhất, đơn giản nhất, "Tôi chỉ muốn làm việc về vấn đề ban đầu tôi có ý định làm việc ngày hôm nay" sửa chữa mà làm việc cho tôi đến từ: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082

Trong cấu hình webpack của bạn, thêm bí danh sau vào resolve phần:

resolve: { 
    alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' } 
} 

Đây là không một sửa chữa lâu dài ổn định, đây là một sự phát triển chỉ sửa chữa, do đó bạn có thể tiếp tục phát triển mà không bị buộc phải đối phó với vấn đề nâng cấp hoàn toàn bất ngờ.

Tôi vẫn không chắc chắn 100% lý do tại sao tôi gặp sự cố này trong một ứng dụng của mình chứ không phải một vấn đề khác, cả hai đều được tạo từ fountain.js trình tạo phản hồi-redux và có số package.json giống hệt nhau.

Answer 7

Đang cập nhật react-hot-loader không làm việc cho tôi, nhưng loại bỏ các react-hot dạng danh sách các bộ tải, bằng cách đơn giản cho ý kiến ​​nó, cố định vấn đề:

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loaders: [ 
     // 'react-hot', 
     'babel' 
    ] 
} 

Answer 8

tôi đã cùng một vấn đề và không ai trong số các giải pháp làm việc. Sau đó nó xảy ra với tôi rằng có vẻ như phản ứng là mất tích. Tôi gặp vấn đề sau khi cài đặt và gỡ cài đặt gói cho postgreSQL.

Vì vậy, tôi đã thêm nó. PS, tôi đang sử dụng sợi

yarn add react