Invalid HMR 消息錯誤 Webpack

Question

我從 Webpack 收到以下錯誤：

Invalid HMR message后跟一串非常詳細的 JSON。

我真的找不到任何資源來更好地調試它。 任何提示？

如果有人可以讓我深入了解為什么在整個應用程序中使用require時找不到它，那就沒問題了。

以下是一些細節：

• 運行節點/Babel
• 使用 Webpack

NPM 依賴項：

  "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"
  }

網絡包配置：

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] = 'commonjs ' + 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

};

Answer 1

將 client.js 的target從node設置為web 。

如果你捆綁了一個服務器端 React 應用程序，你可以添加到服務器文件的頂部：

require('css-modules-require-hook')({
  generateScopedName: '[name]--[local]',
  prepend: []
});

以便 SSR 反應組件中所需的 css 文件工作。

Answer 2

您需要將目標設置為 'web'，因為您的目的是為 Web 進行編譯。

您應該將引擎設置為節點（這是我假設您嘗試使用目標執行的操作）。

target: "web",
engines: {
  node: "4.x"
},