サーバ側のレンダリングとホットリロードを反応させます

Question

私のwebpackは次のようになります：

'webpack'からwebpackをインポートします。 'path'からのインポートパス。

export default { 
    debug: true, 
    devtool: 'inline-source-map', 
    noInfo: false, 
    entry: [ 
    'eventsource-polyfill', // necessary for hot reloading with IE 
    'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr&reload=true', //note that it reloads the page if hot module reloading fails. 
    path.resolve(__dirname, 'src/index') //starting point set to index js in src dir 
    ], 
    target: 'web', 
    output: { 
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`. 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    contentBase: path.resolve(__dirname, 'src') 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}, 
     {test: /(\.css)$/, loaders: ['style', 'css']}, 
     {test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass']}, 
     {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
     {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'}, 
     {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
     {test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']} ] 
    } 
}; 

babelrc：

{ 
    "presets": ["react", "es2015"], 
    "env": { 
    "development": { 
     "presets": ["react-hmre"] 
    } 
    } 
} 

私はルートの説明を持つ小さなファイル以外の何ものでもない私のroutes.jsファイルをインポートしたいと反応し、ルータ

const routes= (
    <Route path="/sbl_next" component={App}> 
    <IndexRoute component={HomePageContent}/> 
    <Route path = "orderTracking" component = {OrderTracking} /> 
    </Route> 
); 


export default routes; 

を私がやろうしながら使用していますそれは言い続けます：

/home/simran/sbl_frontend/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'); 
    ^

どうすれば修正できますか？

Answer 1

あなたはahackは、ルータのバージョン

devServer: { 
    contentBase: path.resolve(__dirname, 'src'), 
    historyApiFallback: true }, 

し、以下のようにあなたにバベルのファイルを変更するに依存してhistoryApiFallbackお尻する必要があります。

"presets": [ 
    "es2015", // will run third 
    "react", // will run second 
    "stage-0" // will run first 
    ],