使用react，react-dom和react-router来面对@多个错误

Question

我试图用webpack运行构建时遇到错误。似乎像webpack一样无法解决react，react-dom和react-router。我包括我的配置文件，错误和我的package.json。我不知道我哪里出错了。

这是我的webpack.config.js配置：

var webpack = require('webpack');
var path = require('path');

function _path(p) {
  return path.join(__dirname, p);

}
module.exports = {
   entry: [
   './app/app.jsx'
],
externals: {
   jquery: 'jQuery'
},
plugins: [
  new webpack.ProvidePlugin({
  '$': 'jquery',
  'jQuery': 'jquery'
 }),
 new webpack.LoaderOptionsPlugin({
   options: {
    sassLoader: {
     includePaths: [
      path.resolve(__dirname, './node_modules/foundation-sites/scss')
  ]
 }
}
})
],
output: {
  path: __dirname,
  filename: './public/bundle.js'
},
resolve: {
  modules: [__dirname],
alias: {
  'jquery': _path('node_modules/jquery/dist/jquery'),
  'foundation': _path('node_modules/foundation-sites/dist/js/foundation'),
  Main: 'app/components/main.jsx',
  Nav: 'app/components/nav.jsx',
  Timer: 'app/components/timer.jsx',
  Countdown: 'app/components/countdown.jsx',
  Clock: 'app/components/clock.jsx',
  CountdownForm: 'app/components/countdownForm.jsx',
  Controls: 'app/components/controls.jsx',
  applicationStyles: 'app/styles/app.scss'
 },
 extensions: ['*', '.js', '.jsx']
 },
module: {
loaders: [
  {
    loader: 'babel-loader',
    query: {
      presets: ['react', 'es2015', 'stage-0']
    },
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/
  }
 ]
},
devtool: 'eval-source-map'
}

这是错误：

ERROR in ./app/app.jsx
Module not found: Error: Can't resolve 'react' in   '/home/kollie/Desktop/DevFolders/React/ReactTimer/app'
 @ ./app/app.jsx 3:13-29
 @ multi ./app/app.jsx

ERROR in ./app/app.jsx
Module not found: Error: Can't resolve 'react-dom' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app'
 @ ./app/app.jsx 9:15-35
 @ multi ./app/app.jsx

ERROR in ./app/app.jsx
Module not found: Error: Can't resolve 'react-router' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app'
 @ ./app/app.jsx 11:15-38
 @ multi ./app/app.jsx

ERROR in ./app/components/main.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/main.jsx 3:12-28
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/timer.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/timer.jsx 3:12-28
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/countdown.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/countdown.jsx 3:12-28
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/app.jsx
Module not found: Error: Can't resolve 'style' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./app/app.jsx 25:0-43
 @ multi ./app/app.jsx

ERROR in ./app/components/nav.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/nav.jsx 3:12-28
 @ ./app/components/main.jsx
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/nav.jsx
Module not found: Error: Can't resolve 'react-router' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/nav.jsx 5:15-38
 @ ./app/components/main.jsx
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/clock.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/clock.jsx 3:12-28
 @ ./app/components/timer.jsx
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/controls.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/controls.jsx 3:12-28
 @ ./app/components/timer.jsx
 @ ./app/app.jsx
 @ multi ./app/app.jsx

ERROR in ./app/components/countdownForm.jsx
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components'
 @ ./app/components/countdownForm.jsx 3:12-28
 @ ./app/components/countdown.jsx
 @ ./app/app.jsx
 @ multi ./app/app.jsx

我的package.json：

"dependencies": {
    "axios": "^0.15.2",
    "express": "^4.14.0",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "css-loader": "^0.26.0",
    "expect": "^1.20.2",
    "foundation-sites": "^6.2.4",
    "jquery": "^3.1.1",
    "karma": "^1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.3.2"
  }

Answer 1

你把resolve.modules改成了[__dirname]。这意味着它只会查看模块的当前目录，但react等依赖项位于node_modules中。 resolve.modules的默认值是['node_modules']，如果你更改它，你还需要添加node_modules来保持从npm安装的软件包的常规模块分辨率。

resolve: {
  modules: [__dirname, 'node_modules'],
}

Answer 2

将您的扩展Webpack更改为以下内容

resolve: {
   extensions: ['', '.js', '.jsx']
}

使用display-error-details选项运行webpack，以便对错误进行更多调试

webpack --progress --color --watch --display-error-details.