JQuery and other plugins not working after upgrading to webpacker 6

Question

I was forced to upgrade to webpacker 6 and it has been successful for the most part, except that my plugins don't seem to be working.

I followed this guide

In my config/webpack/base.js:

const { webpackConfig, merge } = require("@rails/webpacker");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const customConfig = {
  resolve: {
    extensions: [
      ".mjs",
      ".js",
      ".sass",
      ".scss",
      ".css",
      ".module.sass",
      ".module.scss",
      ".module.css",
      ".png",
      ".svg",
      ".gif",
      ".jpeg",
      ".jpg",
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ["popper.js", "default"],
      Rails: ["@rails/ujs"],
    }),

With those plugins, esp JQuery, not working it's impacting the packs/dependencies I'm using which I've moved to app/javascript/

Error messages I'm seeing in the console when loading pages that rely on these: rails-ujs has already been loaded! and Uncaught ReferenceError: $ is not defined

Apologies in advance for any vagueness or lack of info - not used to this sort of setup but will respond quickly with any info required.