Webpack adds JavaScript file to bundle, but file will not run in browser

Question

I currently have a webpack project and I have bundled halfmoon.css and halfmoon.js together. The CSS part is working but the JavaScript part does not work for some reason.

I have required both and Webpack says it is compiling both:

And some of the code in webpack's bundle matches the code of Halfmoon's. My problem is is that webpack will not be the JavasScript code at all. Then I added console.log("Webpack loaded!"); to the bundle, which indicates that webpack works and was loaded into the browser.

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  mode: "development",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [new CleanWebpackPlugin()]
};

src/index.js

require("halfmoon/css/halfmoon.min.css"); // require halfmoon.css
require("halfmoon/js/halfmoon.js"); // require halfmoon.js
console.log("Webpack loaded!");

Oh and by the way, halfmoon sets a "halfmoon" variable but it keeps saying Uncaught ReferenceError: halfmoon is not defined which is weird.

I have tried switching the mode of webpack to production which didn't work, just made the code production ready. I have also tried to use halfmoon (css/js) locally, which didn't work.

Sorry if I don't make any sense right now, I am kind of panicking.