React CDN:代码中未解析 Webpack 外部库 [英] React CDN: Webpack externals library not resolved in code

问题描述

我正在尝试在我们的生产版本上通过 cdn 加载 React.

I'm trying to load React through cdn on our production builds.

我们普遍使用 React、Heroku、Webpack 2、Material UI 和 React.

We use React Universally, Heroku, Webpack 2, Material UI and React.

为了实现这一点，我们指定了外部对象.但是在我们的生产前端，我看到

In order to achieve this, we specify externals. However on our production frontend, I see

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>

网络包

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

推荐答案

我通过更改 webpack configFactory 来解决这个问题

I resolved this by changing the webpack configFactory from

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

到

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

这篇关于React CDN:代码中未解析 Webpack 外部库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！