Question

我试图在我们的生产版本上通过cdn加载React。

我们使用React Universally，Heroku，Webpack 2，Material UI和React。

为了达到这个目的，我们指定外部。但是在我们的制作前端，我看到了

Uncaught TypeError: Cannot read property 'Component' of undefined
    at Object.<anonymous> (Router.js:43)
    at t (bootstrap 967e68f…:19)
    at Object.<anonymous> (MemoryRouter.js:1)
    at t (bootstrap 967e68f…:19)
    at Object.<anonymous> (index-39d6020….js:8872)
    at t (bootstrap 967e68f…:19)
    at Object.<anonymous> (BrowserRouter.js:13)
    at t (bootstrap 967e68f…:19)
    at Object.<anonymous> (index-39d6020….js:14231)
    at t (bootstrap 967e68f…:19)

HTML包含此

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script><script nonce="08600e6f-1cd5-447a-99fc-4aa6eb3b36d6" type="text/javascript">window.__REACT_ASYNC_COMPONENTS_STATE__={"resolved":{}};</script><script type="text/javascript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Symbol"></script>
<script type="text/javascript" src="/client/index-a531815e63e42831eb66.js"></script>

的WebPack

    externals: removeNil([
      ifNode(
        () => nodeExternals(
          // Some of our node_modules may contain files that depend on our
          // webpack loaders, e.g. CSS or SASS.
          // For these cases please make sure that the file extensions are
          // registered within the following configuration setting.
          {
            whitelist:
              removeNil([
                // We always want the source-map-support included in
                // our node target bundles.
                'source-map-support/register',
                // We want react bundled with our node bundles for the optimised
                // builds as we are going to resolve to the optmised versions
                // of react via the webpack alias configuration.
                ifOptimize('react'),
                ifOptimize('react-dom'),
                ifOptimize('react-dom/server'),
              ])
              // And any items that have been whitelisted in the config need
              // to be included in the bundling process too.
              .concat(config('nodeExternalsFileTypeWhitelist') || []),
          },
        ),
      ),
      // We want to exclude react libraries from the client production version
      ifOptimizeClient(() => {
          return {
            react: {
                root: 'React',
                commonjs2: 'react',
                commonjs: 'react',
                amd: 'react',
                umd: 'react',
            },
            'react-dom': {
                root: 'ReactDOM',
                commonjs2: 'react-dom',
                commonjs: 'react-dom',
                amd: 'react-dom',
                umd: 'react-dom',
            },
            'react-addons-transition-group': {
                root: ['React','addons','TransitionGroup'],
                commonjs: 'react-addons-transition-group',
                commonjs2: 'react-addons-transition-group',
                amd: 'react-addons-transition-group',
            },
          }
      }),
  ]),

Answer 1

我通过从

更改webpack configFactory解决了这个问题

output : {
  libraryTarget: ifNode('commonjs2', 'var'),
}

到

output : {
  libraryTarget: ifNode('commonjs2', 'umd'),
}

React CDN：Webpack外部库未在代码中解析

1 个答案: