使用快速中间件路由器时的 webpack 异常答案

【问题标题】：webpack exception when using express middleware router使用快速中间件路由器时的 webpack 异常
【发布时间】：2016-02-14 13:12:01
【问题描述】：

我有一个简单的 webpack，带有 react hotloader 和 express 设置和工作。我正在尝试添加一个外部节点模块，该模块将为某些服务注册一个子路由器。出于某种原因，这样做会导致一个奇怪的异常（见下文）。

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');

var app = express();

var router = express.Router();

var mod = require("my-module");
mod.registerServices(router); // <-- adds routes to the router
app.use("/api/v1*", router); // <-- This line causes the error

var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
}));

app.use(require('webpack-hot-middleware')(compiler));


app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

例外：

$ node server.js 
/Users/bmonro/Documents/Code/nui-redux/node_modules/react-transform-hmr/lib/index.js:51
    throw new Error('locals[0] does not appear to be a `module` object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using `env` section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');
    ^

Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
    at Object.proxyReactComponents [as default] (/Users/bmonro/Documents/Code/nui-redux/node_modules/react-transform-hmr/lib/index.js:51:11)
    at Object.<anonymous> (/Users/bmonro/Documents/Code/nui-redux/src/ext/nui-company-admin/lib/CompanyLocation/components/simple.js:25:60)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/bmonro/Documents/Code/nui-redux/src/ext/nui-company-admin/lib/CompanyLocation/containers/CompanyLocationPage.js:13:25)
    at Module._compile (module.js:434:26)

更新事实证明，从.babelrc 中删除它，我启用了一些反应转换，随后删除了所有的 web pack hotloader 插件和中间件，使路由器再次工作。

                {
                    "transform": "react-transform-hmr",
                    "imports": ["react"],
                    "locals": ["module"]
                }

【问题讨论】：

标签： node.js express webpack react-hot-loader

【解决方案1】：

试试这个解决方案：不要在 .babelrc 中使用 babel-plugin-react-transform，在 webpack.config.js 中使用 config

module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel',
        include: path.join(__dirname, 'src'),
        query: {
          plugins: [
            ["react-transform", {
              transforms: [{
                transform: "react-transform-hmr",
                imports: ["react"],
                locals: ["module"]
              }]
            }]
          ]
        }
      }
    ]
  }

详情：

【讨论】：