Webpack 5 React component library UMD bundle with SourceMaps

Question

I am attempting to make a webpack 5 build process to create a react component library I just had a couple of things cannot seem to get working.

#1) The webpack build command works fine, and when using the inline-source-map option I can SEE the data URL embeded in the outputted build file but when I ever I attempt to publish and test this library on NPM I always get obfuscated errors without original lines of code so I can't even tell where the errors are; what else am I missing to activate source-maps? I am using Chrome dev tools and it doesn't even tell me a source map is available for that code...

#2) Another issue I am having is after building this with webpack into the dist folder; I start another CRA test app and try to pull components out of the built library but all I get are these errors.

./src/dist/index.js
  Line 1:1:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:112:  'define' is not defined                                                no-undef
  Line 1:123:  'define' is not defined                                                no-undef
  Line 1:190:  Unexpected use of 'self'                                               no-restricted-globals
  Line 1:466:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:631:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

I am aware webpack 5 stopped bundling polyfills for Node but shouldn't this code run if I place it in the src directory of a CRA application? This is bundled code shouldn't it work in the browser/ in another React application? I targeted UMD so I thought it would work in this environment

here is all the necessary info

Webpack.config.js

    const path = require("path");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    const nodeExternals = require("webpack-node-externals");
    module.exports = {
      entry: "./src/index.js",
      devtool: "inline-source-map",
      externals: [nodeExternals()],
      output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
        library: {
          name: "test",
          type: "umd",
        },
      },
      plugins: [new CleanWebpackPlugin()],
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env", "@babel/preset-react"],
              },
            },
          },

          {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
            include: path.resolve(__dirname, "./src"),
          },
        ],
      },
    };

Package.json

    {
      "name": "test-lib",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "start-storybook",
        "build": "webpack --mode production"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "prop-types": "^15.7.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@storybook/addon-knobs": "^6.3.1",
        "@storybook/react": "^6.3.10",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^4.0.0",
        "node-sass": "^6.0.1",
        "path": "^0.12.7",
        "sass-loader": "^12.1.0",
        "webpack": "^5.58.0",
        "webpack-cli": "^4.9.0",
        "webpack-node-externals": "^3.0.0"
      }
    }

Button.js (sample component)

import React from 'react'
import PropTypes from 'prop-types';
const Button = ({message = 'Hello world'}) => (
   <button>{message}</button>
)

Button.propTypes = {
    message: PropTypes.string.isRequired
}
export default Button

Build entry point (index.js)

export { default as Button } from "./components/Button";