React CDN: Webpack externals library not resolved in code

Question

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

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)

The HTML contains this

<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

I resolved this by changing the webpack configFactory from

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

to

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