How to upgrade from Webpacker 5.2.1 to 6.0.0.beta.7?

Viewed 959

I've followed the upgrade guide to update Webpacker to 6.0.0.beta.7. At this point it feels a bit premature, but I also think it'll be easier to proceed forward than to turn back.

After working through a few issues I finally got the webpack-dev-server to successfully run, and pages to load without console errors (I was getting errors associated with "$" not being a function...which was fixed by reverted back to javascript_pack_tag from javascript_packs_with_chunks_tag). However, javascript is still not functioning.

What am I missing here? I'm thinking it's as simple as accurately moving the items from the old environment.js to the new base.js...but, I've been unsuccessful in doing so (see below).

Thanks!

ruby '3.0.1' gem 'rails', '~> 6.1', '>= 6.1.3.1' gem 'webpacker', '~> 6.0.0.beta.7'

// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')
module.exports = merge(webpackConfig, customConfig)
// config/webpack/custom.js

module.exports = {
  resolve: {
    extensions: ['.css'],
    alias: {
      jquery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default']
    }
  }
}
// config/webpack_old/environment.js
// ...this is no longer used by Webpack...but some of these need to be moved to base.js
// ... which I know is my problem, but I haven't found any documentation on how to transfer these to the new base.js

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    Rails: ['@rails/ujs'],
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
)

environment.loaders.append("jquery", {
  test: require.resolve("jquery"),
  use: [
    { loader: "expose-loader", options: { exposes: ["$", "jQuery"] } },
  ],
});
// package.json
{
  "name": "its_a_secret",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.3-4",
    "@rails/actiontext": "^6.1.3",
    "@rails/activestorage": "^6.0.3-4",
    "@rails/ujs": "^6.0.3-4",
    "@rails/webpacker": "6.0.0.beta.7",
    "@ttskch/select2-bootstrap4-theme": "^1.5.2",
    "activestorage": "^5.2.4-2",
    "bootstrap": "^5.0.0-beta2",
    "chart.js": "^3.1.1",
    "chartkick": "^4.0.3",
    "css-loader": "^5.2.4",
    "css-minimizer-webpack-plugin": "^2.0.0",
    "currency.js": "^2.0.3",
    "dropzone": "^5.9.2",
    "expose-loader": "^2.0.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^1.5.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "select2": "4.1.0-rc.0",
    "sortablejs": "^1.10.2",
    "stimulus": "^2.0.0",
    "stimulus_reflex": "3.4.1",
    "tributejs": "^5.1.3",
    "trix": "1.3.1",
    "turbolinks": "^5.2.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  "engines": {
    "node": "16.0.0",
    "yarn": "1.22.10",
    "npm": "6.14.9"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

0 Answers
Related