Creating a React component library with Webpack and Typescript but WP keeps bundling React

Question

I am trying to make an external component library. I am using Webpack and TypeScript. Compiles fine but when trying to use the library I get:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See /react-invalid-hook-call for tips about how to debug and fix this problem.

Which sounds like webpack bundled React rather than respecting it being a peer dependency. Upon inspecting the bundled file, I can see hints of React's source code.

How do I prevent React from being bundled? Here's the repo of the library

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

Right now my webpack config looks like:

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"],
    },
};

Do you need react-dom too? Ex. react-redux has both react and react-dom — Kevin Wang
– Kevin Wang, Commented Aug 9, 2019 at 3:46

David Alsh · Accepted Answer · 2019-08-09 04:13:05Z

1

I had to add the following to my webpack config

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

answered Aug 9, 2019 at 4:13

David Alsh

8,0578 gold badges47 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a React component library with Webpack and Typescript but WP keeps bundling React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related