0

私はreact-routerなしで反応するjsプロジェクトを開始する必要がありますが、私はホットモジュールの交換をセットアップすることはできません。
私のサーバーWebpackはルータなしでHMRに反応します

const app = express() 

// Apply gzip compression 
app.use(compress()) 

if (project.env === 'development') { 
    const compiler = webpack(webpackConfig) 

    debug('Enabling webpack dev and HMR middleware') 
    app.use(require('webpack-dev-middleware')(compiler, { 
    publicPath : webpackConfig.output.publicPath, 
    contentBase : project.paths.client(), 
    hot   : true, 
    quiet  : project.compiler_quiet, 
    noInfo  : project.compiler_quiet, 
    lazy  : false, 
    stats  : project.compiler_stats 
})) 
app.use(require('webpack-hot-middleware')(compiler, { 
    path: '/__webpack_hmr' 
})) 
} else { 
    .... 
} 

私のアプリケーションのエントリポイント。 ./Appは、プロバイダの内部で自分のアプリケーションをラップする単純なコンポーネントである

const MOUNT_NODE = document.getElementById('root') 

let render =() => { 
    ReactDOM.render(
    <App store={store} />, 
    MOUNT_NODE) 
} 

if (__DEV__) { 
    if (module.hot) { 
     // Development render functions 
     const renderApp = render 
     const renderError = (error) => { 
     const RedBox = require('redbox-react').default 

     ReactDOM.render(<RedBox error={error} />, MOUNT_NODE) 
    } 

    // Wrap render in try/catch 
    render =() => { 
     try { 
     renderApp() 
     } catch (error) { 
     console.error(error) 
     renderError(error) 
     } 
    } 

    // Setup hot module replacement 
    module.hot.accept('./App',() => 
    setImmediate(() => { 
     ReactDOM.unmountComponentAtNode(MOUNT_NODE) 
     render() 
    }) 
    ) 
} 

}

shouldComponentUpdate =() => false; 

render() { 
    return (
    <Provider store={this.props.store}> 
     <RootComponent /> 
    </Provider> ) 
} 

そして、主な問題がある - 私はこの、または子ファイルを保存するときに、HMRの再構築と何も変わっていることを、それでも、私はルータを使用して、代わりに単純なコンポーネントの、アプリケーションのエントリポイントとして渡す - そのうまく動作します。

export const createRoutes = (store) => ({ 
    path  : '/', 
    component : CoreLayout, 
    indexRoute : { onEnter: (nextState, replace) => replace('/songs') }, 
    childRoutes : [ 
    ... 
] 
}) 

私は間違っていますか?あなたがそう文句を言わない場合

答えて

1

申し訳ありませんが、それは本当に簡単だった、

module.hot.accept('./App',() => 
    setImmediate(() => { 
     ReactDOM.unmountComponentAtNode(MOUNT_NODE) 
     render() 
    }) 
) 

に単に

module.hot.accept(); 
+0

あなたがこれを知りましたを変更しますか?私はどこでもその例を見つけることができませんが、それは私のアプリで動作します。 –

関連する問題