admin管理员组文章数量:1313317
I'm getting the following error from Webpack:
Invalid HMR message
Followed by a string of very detailed JSON.
There really aren't any resources that I can find to better debug this. Any tips?
Bonus if anyone can give me insight to why require
can't be found when it's used throughout the app no problem.
Here are some details:
- Running Node/Babel
- Using Webpack
NPM dependencies:
"dependencies": {
"babel-core": "^6.7.2",
"babel-polyfill": "^6.7.4",
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"css-modules-require-hook": "^4.0.0",
"cuid": "^1.3.8",
"debug": "~2.1.1",
"express": "~4.12.2",
"fs": "0.0.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"serve-favicon": "~2.2.0",
"webpack": "^1.12.13"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.7.2",
"cross-env": "^1.0.7",
"css-modules-require-hook": "^4.0.0",
"eslint": "^2.6.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.10.0"
}
Webpack config:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'monjs ' + mod;
});
module.exports = {
devtool: 'cheap-source-map',
entry: ['webpack-hot-middleware/client',
'./index.js',
],
target: 'node',
output: {
path: __dirname,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css?modules',
},
{
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
query: {
presets: ['react-hmre'],
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true)
}
})
],
externals: nodeModules
};
I'm getting the following error from Webpack:
Invalid HMR message
Followed by a string of very detailed JSON.
There really aren't any resources that I can find to better debug this. Any tips?
Bonus if anyone can give me insight to why require
can't be found when it's used throughout the app no problem.
Here are some details:
- Running Node/Babel
- Using Webpack
NPM dependencies:
"dependencies": {
"babel-core": "^6.7.2",
"babel-polyfill": "^6.7.4",
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"css-modules-require-hook": "^4.0.0",
"cuid": "^1.3.8",
"debug": "~2.1.1",
"express": "~4.12.2",
"fs": "0.0.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"serve-favicon": "~2.2.0",
"webpack": "^1.12.13"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.7.2",
"cross-env": "^1.0.7",
"css-modules-require-hook": "^4.0.0",
"eslint": "^2.6.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.10.0"
}
Webpack config:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'monjs ' + mod;
});
module.exports = {
devtool: 'cheap-source-map',
entry: ['webpack-hot-middleware/client',
'./index.js',
],
target: 'node',
output: {
path: __dirname,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css?modules',
},
{
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
query: {
presets: ['react-hmre'],
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true)
}
})
],
externals: nodeModules
};
Share
Improve this question
edited Apr 3, 2016 at 5:09
John Doe
asked Apr 3, 2016 at 0:56
John DoeJohn Doe
3,69115 gold badges65 silver badges112 bronze badges
11
- 1 Can you post your webpack config? Can you also post a simple ponent where you are seeing this issue? – Anuj Commented Apr 3, 2016 at 3:29
- added that @Anuj see above. – John Doe Commented Apr 3, 2016 at 5:09
-
Why
target: 'node'
? – Bob Sponge Commented Apr 3, 2016 at 10:50 - because "The target: 'node' option tells webpack not to touch any built-in modules like fs or path." @BobSponge – John Doe Commented Apr 3, 2016 at 18:28
- Setting the environment variable CLIENT should be able to use true as is without the need for JSON.stringify. – Rob Brander Commented Apr 5, 2016 at 15:58
2 Answers
Reset to default 1Set your target
from node
to web
for the client.js.
If you are bundling a server side React app, you can add to the top of server file:
require('css-modules-require-hook')({
generateScopedName: '[name]--[local]',
prepend: []
});
So that the css-files required in SSR react ponents work.
You will want to set target to 'web' because your intention is to pile for the web.
You should set the engine to node (which is what I'm assuming you were trying to do using target).
target: "web",
engines: {
node: "4.x"
},
本文标签: javascriptInvalid HMR message error WebpackStack Overflow
版权声明:本文标题:javascript - Invalid HMR message error Webpack - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741936781a2405903.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论