Fehler Entwicklung ist nicht Fehler definiert mit reagieren Hot-loader v3 und webpack-hot-Middleware

Question

Da diese die Abhängigkeiten, die ich verwende:

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

Fehler

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 

Sie können sich dies entweder repo

webpa ansehen ck-config

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 Server

// 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') 
    } 
}) 

Answer 1

Der Fehler dieses Teil Ihrer Konfiguration verursacht wird:

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

zitieren the documentation:

Beachten Sie, dass, da das Plugin eine direkte Textersetzung durchführt, der angegebene Wert tatsächliche Anführungszeichen innerhalb der Zeichenfolge selbst enthalten muss. In der Regel wird dies entweder mit alternativen Anführungszeichen wie '' production '' oder mit JSON.stringify ('production') durchgeführt.

Wenn Sie es mit zum Beispiel ersetzen, die folgenden, sollte es funktionieren:

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