javascript - React Hot Loader がブラウザの変更を反映していない

Question

私は反応プロジェクトに取り組んでいます。反応するホットローダーを使用しようとしています。プロジェクト内のすべてが正常に動作しますが、コンポーネントに変更を加えると、ブラウザーで変更を確認できません。ホットローダーを設定するための公式ドキュメントに従いました。しかし、それは機能していません。ただし、私のコンテンツはブラウザ (localhost:3000) に読み込まれます。ホットローダーが変更を表示し始めるにはどうすればよいですか。これが私のファイルです。

App.js

import React from 'react';
import Userlist from '../containers/user-list';
import UserDetail from '../containers/user-detail';
require('../../scss/style.scss');
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';


const App = () => (
    <MuiThemeProvider>
        <div>
            <RaisedButton label="Default" />
            <h2>
                Usernamess
            </h2>
            <Userlist/>
            <hr/>
            <h2>
                User Detail
            </h2>
            <hr/>
            <UserDetail/>
        </div>
    </MuiThemeProvider>
);

export default App;

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './dev/js/index.js'
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel'],
                include: path.join(__dirname, 'dev')
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

パッケージ.json

{
  "name": "react-redux-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "material-ui": "^0.15.4",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^15.1.0",
    "react-addons-test-utils": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-stage-0": "^6.5.0",
    "react-transform-hmr": "^1.0.4",
    "react-hot-loader": "^1.3.0"
  }
}

サーバー.js

   var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

score 0 · Accepted Answer

ホットローダーの公式スレッドからの要約https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md

「次のモジュールはホットアップデートできませんでした: (完全なリロードが必要です!)

ルートコンポーネントの編集時にこの警告が表示される場合は、そこから何もエクスポートせず、そこから React.render を呼び出していることが原因である可能性があります。ルートコンポーネントを別のファイル (App.jsx など) に配置し、React.render を呼び出す index.js からそれを要求します。"

だから私は自分のApp.jsに変更を加えました

export default class App extends Component {
    render() {
        return (
            <MuiThemeProvider>
                <div>
                    <RaisedButton label="Default" />
                    <h2>
                        Usernamess
                    </h2>
                    <Userlist/>
                    <hr/>
                    <h2>
                        User Deta
                    </h2>
                    <hr/>
                    <UserDetail/>
                </div>
            </MuiThemeProvider>
        );
    }
}

javascript - React Hot Loader がブラウザの変更を反映していない

1 に答える 1

Related

Reference