使用react-hot-loader v3和webpack-hot-middleware时,error development没有定义错误

鉴于这些是我正在使用的依赖关系:

"react-hot-loader": "3.0.0-beta.7", "webpack": "2.6.1", "webpack-dev-middleware": "^1.11.0", "webpack-hot-middleware": "^2.18.1", "webpack-merge": "^4.1.0" 

错误

 patch.js:5 Uncaught ReferenceError: development is not defined at Object.defineProperty.value (patch.js:5) at __webpack_require__ (bootstrap 921586e…:659) at fn (bootstrap 921586e…:85) at Object.options.path (patch.js:1) at __webpack_require__ (bootstrap 921586e…:659) at fn (bootstrap 921586e…:85) at Object.<anonymous> (process-update.js:132) at __webpack_require__ (bootstrap 921586e…:659) at validateFormat (bootstrap 921586e…:708) at bootstrap 921586e…:708 

你可能要看看这个回购

的WebPack-configuration

 const FILE_PATHS = { entry: path.resolve('./src/index.js'), reactHotLoader: 'react-hot-loader/patch', hmrEntry: 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', // this is from the webpack-hot-middleware docs output: '/' // this is the path used by webpack-dev-middleware, the docs say no real path is required, just pass in `/` } const devOnly = { entry: FILE_PATHS.entry, output: { path: '/', publicPath: '/assets/', filename: 'bundle.js' }, devtool: 'source-map', module: { rules: [ { test: /\.jsx?$/, use: [ { loader: 'babel-loader' } ], // react-hot-loader asks to include src and exclude node_modules in https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md include: path.resolve('./src'), exclude: /node_modules/ }, { test: /\.json$/, use: [ { loader: 'json-loader' } ] }, { test: /\.svg$/, use: [ { loader: 'svg-sprite-loader' } ] } ] }, plugins: [ new DefinePlugin({ 'process.env.NODE_ENV': 'development' }) ] } const hmr = { entry: [FILE_PATHS.reactHotLoader, FILE_PATHS.hmrEntry, FILE_PATHS.entry], plugins: [new HmrPlugin(), new NoErrorsPlugin()], devServer: { hot: true } } const dev = merge(devOnly, hmr) module.exports = {dev} 

Express服务器

 // process.env.NODE_ENV = 'development' const express = require('express') const webpack = require('webpack') const historyApiFallback = require('connect-history-api-fallback') const normalizeAssets = assets => { return Array.isArray(assets) ? assets : [assets] } const getLinks = assets => { const styles = assets.filter(path => path.endsWith('.css')) const links = styles.map(path => `<link rel="stylesheet" href="${path}" />`) return links.join('\n') } const publicPath = '/assets/' const getScripts = assets => { const js = assets.filter(path => path.endsWith('.js')) const scripts = js.map(path => `<script src="${path}"></script>`) return scripts.join('\n') } const devMiddlewareConfig = { serverSideRender: true, stats: 'normal', publicPath: publicPath, watchOptions: { poll: 1000, aggregateTimeout: 300 } } const hotMiddlewareConfig = { reload: true, overlay: true } const devMiddlewareCreator = require('webpack-dev-middleware') const hotMiddlewareCreator = require('webpack-hot-middleware') const options = require('./webpack.config') const {dev: devConfig} = options const compiler = webpack(devConfig) const devMiddleware = devMiddlewareCreator(compiler, devMiddlewareConfig) const hotMiddleware = hotMiddlewareCreator(compiler, hotMiddlewareConfig) const app = express() app.use(devMiddleware) app.use(hotMiddleware) app.use(express.static(__dirname + '/public')) app.use((req, res) => { const stats = res.locals.webpackStats.toJson() const assets = normalizeAssets(stats.assetsByChunkName.main) const styles = getLinks(assets) const scripts = getScripts(assets) res.send( ` <!DOCTYPE html> <html> <head> <title>Webpack is crazy</title> ${styles} </head> <body> <div id="app"> </div> ${scripts} </body> </html> ` ) }) // app.use(historyApiFallback) app.listen(3000, err => { if (!err) { console.log('Server is listening on port 3000') } }) 

错误是由您的configuration的这一部分引起的:

 new DefinePlugin({ 'process.env.NODE_ENV': 'development' }) 

引用文档:

请注意,由于插件直接进行文本replace,因此赋予它的值必须包含string本身内的实际引号。 通常,这可以通过使用替代引号(如“production”)或使用JSON.stringify('production')来完成。

如果用例如下面的代替它,它应该工作:

 new DefinePlugin({ 'process.env.NODE_ENV': '"development"' })