React CDN：未在代碼中解析的Webpack外部庫

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

我從

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

解決了這個改變的WebPack configFactory到

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