Question

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

无效的挂钩调用。钩子只能在功能组件。可能发生以下情况之一原因：1.您可能使用了不匹配的React版本和渲染器（例如React DOM）2。您可能违反了挂钩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"      
    }  
}

使用Webpack和Typescript创建一个React组件库，但是WP不断捆绑React

1 个答案: