Webpacker v5 -> v6 upgrade resulting in plugin issues

[malawi89]

Trying to follow the guide by upgrading webpacker to v6 first but running into some trouble. From my understanding the plugins aren't working in 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"],
    }),

Which leads to jquery and various packs/dependencies not working.

Error messages I'm getting in the console are:
rails-ujs has already been loaded! and Uncaught ReferenceError: $ is not defined

Any help would be appreciated - website functionality is down and pulling my hair out over this

[ahangarha]

Have you tried the following in the README file?

Note, the default of "defer" for the javascript_pack_tag. You can override that to false. If you expose jquery globally with expose-loader, by using import $ from "expose-loader?exposes=$,jQuery!jquery" in your app/javascript/application.js, pass the option defer: false to your javascript_pack_tag.