react-hot-loader
既存のアプリケーションに実装しようとしています。チュートリアルに従い、チュートリアルで提案されているように、このリンクのボイラープレート ファイルを使用しました。その後、 を使用してノード サーバーを起動するとyarn start
、次のエラーが表示されます。
ERROR in (webpack)-dev-server/client?http://0.0.0.0:3000
Module not found: Error: Cannot resolve module 'webpack/hot/emitter' in /Users/Rai/Documents/github/sarvahitey-core/client/node_modules/webpack-dev-server/client
@ (webpack)-dev-server/client?http://0.0.0.0:3000 153:19-49
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.78 kB [rendered]
[0] ./~/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./app/client/components/navbar/navbar.css 274 bytes {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.
これが私のwebpack構成ファイルです:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var combineLoaders = require('webpack-combine-loaders');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./app/StartUp.js'
],
output: {
path: __dirname + "/../app/assets/webpack",
filename: "[name].js"
},
resolve: {
extensions: ['', '.js', '.jsx', '.css'],
},
module: {
loaders: [
{ test: /\.jsx?$/,
loaders: ['react-hot','babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'],
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
combineLoaders([{
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}])
)
}
]
},
plugins: [
new ExtractTextPlugin("main.css"),
new webpack.HotModuleReplacementPlugin()
]
};
そして、私のpackage.json
ファイルには次の構成があります:
{
"dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-on-rails": "^6.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-server": "^2.3.0"
},
"devDependencies": {
"react-hot-loader": "^1.3.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1"
},
"scripts": {
"start": "node server.js"
}
}
上記のエラーが発生する理由はありますか? 同じことをグーグルで検索しようとしましたが、何も見つかりませんでしたCannot resolve module 'webpack/hot/emitter'
。