将 webpack 与 react 一起使用时出错

Question

我正在研究 Apress 的 Pro MERN Stack 中的示例，并遇到了 webpack 的问题。在我开始使用它之前，一切都按预期进行。现在当我运行 npm run compile 我得到这个：

> pro-mern-stack@1.0.0 compile /Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack
> webpack

Hash: 3869c18532e36184fca8
Version: webpack 4.12.0
Time: 1101ms
Built at: 2018-06-16 18:56:00
 1 asset
 [0] ./src/BorderWrap.jsx 2.33 KiB {0} [built]
 [2] ./src/IssueList.jsx 6.38 KiB {0} [built]
 [3] ./src/IssueFilter.jsx 2.25 KiB {0} [built]
 [4] ./src/IssueAdd.jsx 3.03 KiB {0} [built]
[17] ./src/App.jsx 882 bytes {0} [built]
    + 13 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/node_modules/react-dom/cjs'
 @ ./node_modules/react-dom/cjs/react-dom.production.min.js 13:53-69
 @ ./node_modules/react-dom/index.js
 @ ./src/App.jsx

ERROR in ./src/App.jsx
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/src'
 @ ./src/App.jsx 3:13-29

ERROR in ./src/IssueList.jsx
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/src'
 @ ./src/IssueList.jsx 9:13-29
 @ ./src/App.jsx

ERROR in ./src/BorderWrap.jsx
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/src'
 @ ./src/BorderWrap.jsx 9:13-29
 @ ./src/App.jsx

ERROR in ./src/IssueFilter.jsx
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/src'
 @ ./src/IssueFilter.jsx 9:13-29
 @ ./src/App.jsx

ERROR in ./src/IssueAdd.jsx
Module not found: Error: Can't resolve 'react' in '/Users/me/Documents/Books/Pro MERN Stack/pro-mern-stack/src'
 @ ./src/IssueAdd.jsx 9:13-29
 @ ./src/App.jsx
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! pro-mern-stack@1.0.0 compile: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the pro-mern-stack@1.0.0 compile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2018-06-16T17_56_00_932Z-debug.log

我不认为 React 有任何改变，所以不明白为什么它会突然引起问题。我的想法是，要么 webpack 有问题，要么我使用的 webpack 版本与 react 版本不兼容。我假设每个错误都是同一个问题。

有没有人遇到过类似的事情，如果有，你是如何解决的？

添加package.json

{
  "name": "pro-mern-stack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon -w server.js server/server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "async": "^2.6.1",
    "body-parser": "^1.18.3",
    "co": "^4.6.0",
    "express": "^4.16.3",
    "mongodb": "^3.0.10"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.17.5",
    "react-dom": "^16.4.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.7",
    "whatwg-fetch": "^2.0.4"
  }
}

Answer 1

正如@tarzenchug 指出的那样，未安装 React。当我运行 npm i react 它起作用了。

将 webpack 与 react 一起使用时出错

Errors when using webpack with react

javascript

reactjs

webpack

mern