23

我从 Webpack 收到以下错误：

Invalid HMR message后面是一串非常详细的 JSON。

我真的找不到任何资源来更好地调试它。有小费吗？

Webpack 控制台错误

如果有人可以让我了解为什么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

};
4

2 回答 2

1

为 client.js设置target从node到web。

如果您正在捆绑服务器端 React 应用程序，您可以添加到服务器文件的顶部：

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

以便 SSR 反应组件中所需的 css 文件起作用。

于 2020-01-22T20:43:38.947 回答
0

您需要将目标设置为“web”，因为您的目的是为 web 编译。

您应该将引擎设置为节点（这是我假设您尝试使用目标所做的）。

target: "web",
engines: {
  node: "4.x"
},
于 2016-04-05T16:04:59.820 回答