React CDN：Webpack外部库未在代码中解析(React CDN: Webpack externals library not resolved in code)

React CDN：Webpack外部库未在代码中解析(React CDN: Webpack externals library not resolved in code)

我正在尝试通过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', }, } }), ]),

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

最满意答案

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

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

至

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

I resolved this by changing the webpack configFactory from

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

to

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