reactjs - 动态加载模块时出错

Question

在我的 Page/Page.js 组件中，我试图基于称为“模块”的模块数组在 REACT 中动态加载模块。目前我列出了所有模块，并为模块数组中的每个模块创建了组件。

import React from 'react';
import s from './Page.css';

import Feedback from '../Feedback';
import Footer from '../Footer';
import Header from '../Header';
import Layout from '../Layout';
import Link from '../Link';
import Navigation from '../Navigation';
import Intro from '../Intro';

const importedModules = {
  Feedback,
  Footer,
  Header,
  Layout,
  Link,
  Navigation,
  Intro,
};

class Page extends React.Component {
  static propTypes = {
    modules: React.PropTypes.arrayOf(React.PropTypes.shape({
      module: React.PropTypes.string.isRequired,
    })).isRequired,
  };

  render() {
    const { modules } = this.props;
    let key = 0;
    const items = modules.map((item) => {
      key += 1;
      return React.createElement(importedModules[item.module], {
        key,
      });
    });
    return (
      <div className={s.root}>
        {items}
      </div>
    );
  }
}

export default Page;

我开始看这个博客 http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/

我尝试使用System.import导入

import React from 'react';
import s from './Page.css';

import Feedback from '../Feedback';
import Footer from '../Footer';
import Header from '../Header';
import Layout from '../Layout';
import Link from '../Link';
import Navigation from '../Navigation';
import Intro from '../Intro';

const importedModules = {
  Feedback,
  Footer,
  Header,
  Layout,
  Link,
  Navigation,
  Intro,
};

function loadRoute(cb) {
 return (module) => cb(null, module.default);
}

class Page extends React.Component {
  static propTypes = {
    modules: React.PropTypes.arrayOf(React.PropTypes.shape({
      module: React.PropTypes.string.isRequired,
    })).isRequired,
  };

  render() {
    const { modules } = this.props;
    let key = 0;
    const items = modules.map((item) => {
      key += 1;
      System.import('../'+String(item.module)).then((cb) => {
        console.log(loadRoute(cb));
        return React.createElement(loadRoute(cb), {
          key,
        });
      });
    });
    return (
      <div className={s.root}>
        {items}
      </div>
    );
  }
}

export default Page;

我收到错误：

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Can't resolve 'react/addons' in '/Users/jgs/Projects/react/MyApp/node_modules/enzyme/build'
 @ ./~/enzyme/build/react-compat.js 41:16-39 42:46-69
 @ ./~/enzyme/build/ShallowWrapper.js
 @ ./~/enzyme/build/index.js
 @ ./src/components/Layout/Layout.test.js
 @ ./src/components async ^\.\/.*$
 @ ./src/components/Page/Page.js
 @ ./src/client.js
 @ multi babel-polyfill react-hot-loader/patch webpack-hot-middleware/client ./client.js
ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Can't resolve 'react/lib/ReactContext' in '/Users/jgs/Projects/react/MyApp/node_modules/enzyme/build'
 @ ./~/enzyme/build/react-compat.js 43:23-56
 @ ./~/enzyme/build/ShallowWrapper.js
 @ ./~/enzyme/build/index.js
 @ ./src/components/Layout/Layout.test.js
 @ ./src/components async ^\.\/.*$
 @ ./src/components/Page/Page.js
 @ ./src/client.js
 @ multi babel-polyfill react-hot-loader/patch webpack-hot-middleware/client ./client.js
ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Can't resolve 'react/lib/ExecutionEnvironment' in '/Users/jgs/Projects/react/MyApp/node_modules/enzyme/build'
 @ ./~/enzyme/build/react-compat.js 73:4-45
 @ ./~/enzyme/build/ShallowWrapper.js
 @ ./~/enzyme/build/index.js
 @ ./src/components/Layout/Layout.test.js
 @ ./src/components async ^\.\/.*$
 @ ./src/components/Page/Page.js
 @ ./src/client.js
 @ multi babel-polyfill react-hot-loader/patch webpack-hot-middleware/client ./client.js

同样在节点控制台中，我得到了这个：

 UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Cannot find module './Intro'.

这是我的目录树

$ tree -d src/
src/
├── components
│   ├── Feedback
│   ├── Footer
│   ├── Header
│   ├── Intro
│   ├── Layout
│   ├── Link
│   ├── Navigation
│   └── Page
├── core
│   └── fetch
├── data
│   ├── queries
│   └── types
└── routes
    ├── about
    ├── admin
    ├── contact
    ├── error
    ├── home
    ├── login
    ├── notFound
    ├── page
    ├── privacy
    └── register