捆绑为 UMD 的 React 组件在通过脚本标记导入另一个 react 应用程序中时无法加载依赖项

Question

我创建了一个简单的react组件，并希望有条件地将其导入另一个react应用程序。我已经设法通过HTML脚本标记导入它，然后从窗口变量中获取它。只要react被捆绑在模块中，整个想法就一直有效。我想使用父应用程序的外部react实例，所以我配置了这样的webpack：

const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'module.js',
library: 'test',
libraryTarget: 'umd',
},
externals: {
'react': {
'commonjs': 'react',
'commonjs2': 'react',
'amd': 'react',
'root': 'React'
}
}
};

edit:我已将外部变量更改为{ react: 'React' }，并且在父应用程序中，我已将react分配给window.React变量。

const Test = (window as any).test.default
console.log(window.React)
console.log(Test)
return <Test />

上面的代码导致了相同的错误。

{Children: {…}, Fragment: Symbol(react.fragment), Profiler: Symbol(react.profiler), Component: ƒ, PureComponent: ƒ, …}
ƒ (){return o.default.createElement("p",{style:{color:"green",fontWeight:"bold"}},"Hello, I come from an external module!")}
module.js:1 Uncaught TypeError: Cannot read property 'createElement' of undefined

已解决
我发现React实例必须在窗口中可用。加载UMD脚本时React变量。起初，我通过在加载脚本之前从CDN加载React来运行它。最后，在确定窗口后，我决定动态加载外部组件。React可用。它按预期工作。

Answer 1

这样配置外部对象：

外部：{react："react"}，

这将不包括React在您的捆绑包中。确保包含此捆绑包的应用程序在其窗口对象中导出React。通常在任何react项目中，react实例都可以在窗口中使用。

Answer 2

尝试使用一次

externals: { react: 'window.React' }