Reactのエラーについて

Question

Uncaught 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

上記のエラーがでるのですが、解決方法がわかりません。

ノードモジュールにてバベルをダウンロードしwebpackにて実行しても同じエラーがでてしまいます。

どなたか、解決方法をご存知な方、いらっしゃいますでしょうか？

宜しくお願いいたします。

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'assets/js'),
  entry: {
    react: './react.jsx'//ここを増やす
  },
  output: {
    path: path.join(__dirname, 'public/js/react'),
    filename: 'react.js'
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        },
      }
    ],
  },
  devServer: {
    port:8888,
    inline: true
  },
};

上記がwebpackの記述内容になります。

Answer 1

Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled.

こちらのエラー文をググってはみましたか？ググると同様のエラーの報告、それに対するライブラリ開発者からの回答が載っているイシューがいくつか見つかるので、まだ、それを試していない場合は試してみて下さい。既に試してる場合は、調べて出てきた解決策を試してみて、その結果どうだったのかを質問文に追記なさってください。

https://github.com/gaearon/react-transform-hmr

あわせて、エラー文に書いてある通り、上記ページに設定方法を記したサンプルコードがありますので、そちらを参考にwebpackの設定をいじって試してみてください。

リンク先のサンプルコードには今回エラーで指摘されているlocalキーに対する設定も含まれています。

最後にreact-transform-hmrは既にdeprecatedであり、利用非推薦になっていますので、その点も認識しておくと良いかと思います。