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

Posted 2023-02-22

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

【英文标题】：React component bundled as an UMD can't load a dependency when imported via script tag in another react app

【发布时间】：2020-08-14 11:47:57

【问题描述】：

我创建了一个简单的反应组件，我想有条件地将它导入另一个反应应用程序。 我设法通过 html 脚本标记导入它，然后从 window 变量中获取它。 只要 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'
        
    
;

编辑： 我已将外部更改为 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 实例必须在 window.React 中可用 加载 UMD 脚本时的变量。起初，我设法通过在加载脚本之前从 CDN 加载 React 来运行它。最后，在确保 window.React 可用之后，我决定动态加载外部组件。它按预期工作。

【参考方案1】：

尝试使用一次

externals:  react: 'window.React' 

【参考方案2】：

像这样配置你的外部对象：

外部： 反应：'反应' ,

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

【讨论】：

我按照你的指示将 React 添加到了 window 变量中，就像在后期编辑中一样。不幸的是，它导致了同样的错误。

您是否在 console.log 中获得了 window.React 的值？

另外，您的父应用程序中的 react 和 react-dom 版本是否与您在其他模块中使用的相同

我得到了 window.React 的值，就像在添加的 sn-p 中一样。我使用相同版本的反应。我没有使用 react-dom，我只导出一个段落。