webpack - 解析エラーで Webpack HMR が中断する

Question

コードが HMR でリロードされないという問題があります。CLI webpack dev サーバーを使用しています。変更が表示され、webpack が再コンパイルされますが、サイトはリロードされません。

コンソールログ:

[Log] [WDS] Hot Module Replacement enabled.
[Log] [WDS] App updated. Recompiling... (x2)
[Log] [WDS] App hot update...
[Log] [HMR] Checking for updates on the server...
[Warning] [HMR] Update failed: parse@[native code]
onreadystatechange@http://localhost:8080/assets/vendor.js:67:38

このエラーは、挿入された Webpack コードの一部です。

request.onreadystatechange = function() {
     ...
  var update = JSON.parse(request.responseText); <-- this breaks

私のコードは基本的にこれです: https://github.com/jaredpalmer/react-production-starterを除いて、Koa2 に切り替えました。途中、さまざまな理由でビルドイン HMR を使用できなかったので、現在は外部サーバーに頼っています。

私の設定：

{
  devtool: 'eval',
  entry: {
    main: [
     path.join(process.cwd(), 'client'),
    ],
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'redux',
      'react-redux',
      'aphrodite'
    ]
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/assets/',
    path: path.join(process.cwd(), 'public/assets')
  },
  module: {

    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /(node_modules|server)/,
        query: {
          cacheDirectory: false,
          presets: ["es2015", "react", "stage-0"]
        }
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      '__DEV__': true
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', 2),
    new webpack.NoErrorsPlugin()
  ],
}

次のように webpack サーバーを呼び出します。

webpack-dev-server --config tools/webpack.client.dev.js --hot --inline

問題は何ですか？webpack が解析する無効な情報を受け取っているようですが、それが何を想定しているのか、何から来ているのかわかりません。

クライアントの index.js ファイルはこちらと同じです。

最初のレンダリングを提供するコードを再配置しましたが、非常に似ています。元のサーバーコードは次のとおりです。主に、私はそれをキャッチオールルートrouter.all('*')に変え、html を少し変更しましたが、ほとんどの部分は同じです。スクリプトタグは次のとおりです。

 <script>window.renderedClassNames = ${JSON.stringify(data.css.renderedClassNames)};</script>
 <script>window.INITIAL_STATE = ${JSON.stringify(initialState)};</script>
 <script src="${ env === 'production' ? '/assets/vendor.js' : 'http://localhost:8080/assets/vendor.js'}" ></script>
 <script async src="${ env === 'production' ? '/assets/main.js' : 'http://localhost:8080/assets/main.js'}" ></script>

client/index.jsファイルの下部にこれが含まれています：

if (module.hot) {
  module.hot.accept('../common/routes/root', () => {
    unsubscribeHistory()
   setTimeout(render)
  })
 }

ただし、呼び出されることはありません。

誰かが光を当てることができますか？

webpack - 解析エラーで Webpack HMR が中断する

0 に答える 0

Related

Reference