Webpack 2 と React Hot Loader v3 でコード分割とホット リロードを実現しようとしています。私の問題は、ホットリロードがコード分割なしでしか機能しないことです。他の奇妙な部分はStructure
、コンポーネントをホットリロードできますが (以下を参照)、childRoutes のコンポーネントはできません。私は取得し続けます
[HMR] unexpected require(816) from disposed module 341
ここで再現を参照してください。
ルートを宣言する方法は次のとおりです。
import { getAsyncInjectors } from './lib/asyncInjectors';
import Structure from './modules/core/components/Structure';
const errorLoading = (err) => {
console.error('Dynamic page loading failed', err);
};
const loadModule = (cb) => (componentModule) => {
cb(null, componentModule.default);
};
export default function createRootRoute(store) {
const {
injectReducer,
} = getAsyncInjectors(store);
return [{
component: Structure,
childRoutes: [{
path: '/',
getComponents(location, cb) {
const renderRoute = loadModule(cb);
Promise.all([
System.import('./modules/core/components/LaunchPage'),
System.import('./modules/core/reducers/launch'),
]).then(([component, reducer]) => {
injectReducer('launch', reducer.default);
renderRoute(component);
}).catch(errorLoading);
},
}, {
path: '/app',
getComponents(location, cb) {
const renderRoute = loadModule(cb);
Promise.all([
System.import('./modules/core/components/AppPage'),
System.import('./modules/core/reducers/app'),
]).then(([component, reducer]) => {
injectReducer('app', reducer.default);
renderRoute(component);
}).catch(errorLoading);
},
}],
}];
}
指針やガイダンスをいただければ幸いです。