React component generated with webpack and babel throws an uncaught error

Question

I have a monorepo setup with lerna. This is also set up to use webpack and babel. The component is built and npm packed. This is then installed locally in a local react project using the generated .tgz file.

The issue I am currently stuck on is, when the app starts a bunch of errors are thrown in the console:

Uncaught Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

How can I resolve this, or what alternative configurations can go with in order to be able to build a react component (Button) npm pack and be able to use it in other projects?

In the dist folder, when I check the contents of the generated index.js file and try to search for "Button Component" this does not exist but the className "Button-button" exists. Although when rendering it fails with an error.

When this component is commented out, the error disappears

The Component:

import React from 'react';
import './Button.scss';

const Button = (): JSX.Element => {
    return (
        <button className="Button-button">Button Component</button>
    );
}

export default Button;

The webpack config:

//Aliases
const aliases = {
    '@cs/react-button': path.resolve(__dirname, '../packages/react-button/src/Button')
};

module.exports = { aliases };

//Rules
const rules = [
    {
        exclude: /node_modules/,
        test: /\.(scss)$/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            autoprefixer({
                                grid: "autoplace",
                            }),
                        ]
                    },
                },
            },
            'sass-loader',
        ],
    },
    {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    "@babel/preset-env",
                    "@babel/preset-react",
                    "@babel/preset-typescript",
                ]
            }
        }
    },
];

module.exports = rules;
module.exports = {
    module: {
        rules: rules
    },
    target: 'web',
    externals: [nodeExternals()],
    entry: './src/index.js',
    output: {
        filename: pkg.main,
        library: '[name]',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true
    },
    resolve: {
        alias: aliases,
        extensions: [".tsx", ".ts", ".js"],
        modules: ['node_modules']
    },
};

Babel:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}