0

反応ホットローダーv3を使用していますが、動作していません。これは、サーバー上の更新をリスニングではなく、私は反応ホットローダーが変更を更新しない

ログ適用-result.jsとして警告を受けるの変更を表示しないd762:11 [HMR]以下のモジュールはホット 更新できませんでした。 (彼らは完全な再読み込みが必要になります!)

以下

私WebPACKの構成は

webpack.local.config.js

var path = require("path") 
var webpack = require('webpack') 
var BundleTracker = require('webpack-bundle-tracker') 

var config = require('./webpack.base.config.js') 
var localSettings = require('./webpack.local-settings.js') 

var ip = localSettings.ip 

config.devtool = "#eval-source-map" 

config.ip = ip 

// Use webpack dev server 
config.entry = { 
    App: [ 
    'webpack-dev-server/client?http://' + ip + ':3000', 
    'webpack/hot/only-dev-server', 
    'react-hot-loader/patch', 
    './reactjs/App', 
    ] 
} 

// override django's STATIC_URL for webpack bundles 
config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/' 

// Add HotModuleReplacementPlugin and BundleTracker plugins 
config.plugins = config.plugins.concat([ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new BundleTracker({filename: './webpack-stats-local.json'}), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify('development'), 
     'BASE_API_URL': JSON.stringify('http://' + ip + ':8000/api/v1/'), 
    }}), 

]) 

// Add a loader for JSX files with react-hot enabled 
config.module.loaders.push(
    { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] } 
) 

module.exports = config 
です

server.js

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

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    inline: true, 
    historyApiFallback: true, 
    quiet: false, 
}).listen(3000, config.ip, function (err) { 
    if (err) { 
    console.log(err); 
    } 

    console.log('Listening at ' + config.ip + ':3000'); 
}); 

と私の.babelrc

{ 
    "presets": ["es2015", "react", "stage-0"], 
    "plugins": [ 
    ["react-hot-loader/babel", "transform-decorators-legacy"], 
    ] 
} 

"反応するホットローダー": "^ 3.0.0-beta.6"、

"webpack": "^ 1.13.3"、

"WebPACKのバンドルトラッカー": "^ 0.1.0"、

"のWebPACK-devのサーバー": "^ 1.16.2"、

"のWebPACK-ローダー": "^ 0.0.1"反応ホット・ローダーの

App.jsx

render(<Change />, document.getElementById('app')) 
+0

https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#the-following-modules-couldnt-be-hot更新された彼らは完全にリロードする必要があります – Izhaki

答えて

0

あなたはドキュメントhereで説明したように、明示的に(またIzhakiにより投稿)のWebPACKのホットモジュールの交換APIを使用する必要がV3。例えば

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 
import App from './containers/App' 

ReactDOM.render(
    <AppContainer> 
    <App/> 
    </AppContainer>, 
    document.getElementById('root') 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./containers/App',() => { 
    const NextApp = require('./containers/App').default; 
    ReactDOM.render(
     <AppContainer> 
     <NextApp/> 
     </AppContainer>, 
     document.getElementById('root') 
    ); 
    }); 
} 
関連する問題