Webpack authored library ReferenceError: react is undefined

I've searched and searched, but can't find an answer. Losing hope.

Here's the issue:

I have a component library that's built on React 17. I've bundled it using webpack 4. The bundle gets generated and there don't seem to be any issues with it, until I tag it and attempt to use it in my work app.

Then I get the following error:

ReferenceError: react is not defined

The app compiles just fine, no errors. It only crashes when trying to use it.

Here's my webpack config for the library:

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const flexBugFixes = require('postcss-flexbugs-fixes');
const presetEnv = require('postcss-preset-env');
const autoprefixer = require('autoprefixer');
const normalize = require('postcss-normalize');
const nodeExternals = require('webpack-node-externals');
// const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'production',
  entry: './src/index.tsx',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'RenezaComponents',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                [
                  '@babel/preset-react',
                  {
                    runtime: 'automatic'
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  flexBugFixes,
                  presetEnv({
                    autoprefixer: {
                      flexbox: 'no-2009'
                    },
                    stage: 3
                  }),
                  autoprefixer,
                  normalize()
                ]
              }
            }
          }
        ],
        sideEffects: true
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  flexBugFixes,
                  presetEnv({
                    autoprefixer: {
                      flexbox: 'no-2009'
                    },
                    stage: 3
                  }),
                  autoprefixer,
                  normalize()
                ]
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /.(woff(2)?|ttf)/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  externals: nodeExternals()
};

The library gets installed using npm from our work private repository.

Example:

import { Button } from 'reneza-components'; // package.json has this as the library name

I've tried mucking about with externals, but none of them work. It always complains about the same thing.

The only other solution right now that I can come up with is just bundling react with it so it'd shut up. But that's not optimal.

I'm out of ideas. Perhaps anyone here would be a bit more clever than me?

Edit: Even bundling it together makes it throw the same error. So I'm all out of ideas.