title: Creating a React component library with Webpack and Typescript but WP keeps bundling React
body: <p>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:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>How do I prevent React from being bundled?
  Here's the repo of the library</p>
  
  <p><a href="https://github.com/alshdavid-sandbox/react-component-lib-problem" rel="nofollow noreferrer">https://github.com/alshdavid-sandbox/react-component-lib-problem</a></p>
  
  <p>Right now my webpack config looks like:</p>
  
  <pre><code>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"],
      },
  };
  </code></pre>