how to use with npm and webpack?

[ReenigneArcher]

I'm trying to bundle some common js scripts into a single npm package for use across my different projects, one of those common js scripts is loading the widgetbot crate.

I'm facing some issues though.

discord.js

import Crate from '@widgetbot/crate';

// this doesn't work either
// const Crate = require('@widgetbot/crate').default;

// Widgetbot initialization
let widgetbot = new Crate({
    server: 'my_server_id',
    channel: 'my_channel_id',
    defer: false,
});

webpack.config.js

const path = require('path');

let production = process.env.NODE_ENV === 'production';

let config = {
    entry: {
        'discord': './src/js/discord',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
    devtool: 'inline-source-map',
    mode: "development",
    devServer: {
        contentBase: './dist',
    },
}

if (production) {
    config.mode = 'production';
    config.devtool = 'source-map';
}

module.exports = config;

package.json

{
  "name": "@lizardbyte/shared-web",
  "repository": "https://github.com/LizardByte/shared-web.git",
  "version": "0.0.0",
  "description": "Shared web assets for LizardByte projects",
  "files": [
    "dist/",
    "src/",
    "tests/",
    "LICENSE",
    "README.md"
  ],
  "dependencies": {
    "@widgetbot/crate": "3.7.0",
    "bootstrap": "5.3.3",
    "jquery": "3.7.1"
  },
  "devDependencies": {
    "@babel/core": "7.25.2",
    "@babel/preset-env": "7.25.3",
    "@eslint/js": "9.9.0",
    "@jest/globals": "29.7.0",
    "babel-loader": "9.1.3",
    "cross-env": "7.0.3",
    "eslint": "9.9.0",
    "eslint-plugin-jest": "28.8.0",
    "globals": "15.9.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-junit": "16.0.0",
    "node-fetch": "3.3.2",
    "npm-run-all": "4.1.5",
    "react-dom": "18.3.1",
    "webpack": "5.94.0",
    "webpack-cli": "5.1.4",
    "webpack-dev-server": "5.0.4"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "testEnvironment": "jsdom"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "start": "webpack serve",
    "test": "npm-run-all test:unit test:report test:lint",
    "test:unit": "jest --coverage",
    "test:report": "jest --reporters=jest-junit",
    "test:lint": "eslint ."
  }
}

I don't know if I'm doing something incorrectly, but I get the following two errors when I try to use the generated script one of my projects.

TypeError: A.current is null
    useMemo React
    c Redux
    React 12
    default index.js:46
    forceUpdate index.js:85
    y index.js:67
    <anonymous> discord.js:11
    <anonymous> discord.js:14
    <anonymous> discord.js:14
react-dom.production.min.js:216:199

Uncaught TypeError: A.current is null
    useMemo React
    c Redux
    React 12
    default index.js:46
    forceUpdate index.js:85
    y index.js:67
    <anonymous> discord.js:11
    <anonymous> discord.js:14
    <anonymous> discord.js:14
react.production.min.js:26:30

For testing without webpack, I also tried the following, but getting a different error.

import Crate from '../../../@widgetbot/crate/dist/api/index.js';

// Widgetbot initialization
let widgetbot = new Crate({
    server: '804382334370578482',
    channel: '804383092822900797',
    defer: false,
});

Uncaught SyntaxError: The requested module 'http://localhost:63342/LizardByte.github.io/dist/node_modules/@widgetbot/crate/dist/api/index.js' doesn't provide an export named: 'default' discord.js:1:8

I'm trying to use the crate from NPM instead of jsdelivr because it helps avoid IDE and lint errors/warnings, and also helps improve code completion.