1

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);
      },
    }],
  }];
}

指針やガイダンスをいただければ幸いです。

4

0 に答える 0