我尝试使用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"
}
答案 0 :(得分:1)
您已将resolve.modules
更改为[__dirname]
。这意味着它只会查看模块的当前目录,但react
等依赖项位于node_modules
。 resolve.modules
的默认值为['node_modules']
,如果您更改它,则还需要添加node_modules
以保持从npm安装的软件包的常规模块解析。
resolve: {
modules: [__dirname, 'node_modules'],
}
答案 1 :(得分:0)
将您的扩展Webpack更改为以下
resolve: {
extensions: ['', '.js', '.jsx']
}
使用display-error-details选项运行您的webpack,以便对错误进行更多调试
webpack --progress --color --watch --display-error-details.