时间戳

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

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

问题描述

我创建了一个简单的反应组件，我想有条件地将它导入另一个反应应用程序。我设法通过 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

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

标签： javascripthtmlreactjswebpackumd

解决方案

尝试使用一次

externals: { react: 'window.React' }

推荐阅读