使用 Webpack 和 Typescript 创建 React 组件库，但 WP 一直在捆绑 React

Question

我正在尝试制作一个外部组件库。我正在使用 Webpack 和 TypeScript。 编译得很好，但是当我尝试使用我得到的库时：

无效的钩子调用。 Hooks 只能在 a 的主体内部调用 功能组件。这可能发生在以下情况之一 原因：1. 你可能有不匹配的 React 版本和 渲染器（例如 React DOM） 2. 你可能违反了 Hooks 3. 你可能在同一个应用程序中拥有多个 React 副本 有关如何调试的提示，请参阅 /react-invalid-hook-call 并解决这个问题。

这听起来像是 webpack 捆绑了 React，而不是将其视为对等依赖。检查捆绑文件后，我可以看到 React 源代码的提示。

如何防止 React 被捆绑？ 这是图书馆的回购

https://github.com/alshdavid-sandbox/react-component-lib-problem

现在我的 webpack 配置如下：

module.exports = {
    entry: path.join(__dirname, '/src/index.ts'),
    mode,
    output: {
        filename: 'index.js',
        publicPath: '',
        path: path.join(__dirname, 'build'),
        libraryTarget: 'commonjs'   
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
};

Answer 1

我必须将以下内容添加到我的 webpack 配置中

externals: {      
    react: {          
        commonjs: "react",          
        commonjs2: "react",          
        amd: "React",          
        root: "React"      
    },      
    "react-dom": {          
        commonjs: "react-dom",          
        commonjs2: "react-dom",          
        amd: "ReactDOM",          
        root: "ReactDOM"      
    }  
}