Webpack Error: Cannot read property .toWebpackConfig of undefined

I added a new dependency, pdf-lib, and now webpack/webpacker is blowing up.

ruby version 2.7.0
node version 14.15.3

dependencies:
"dependencies": {

    "@rails/actioncable": "^6.0.0",

    "@rails/actiontext": "^6.0.0",

    "@rails/activestorage": "^6.0.0",

    "@rails/ujs": "^6.0.0",

    "@rails/webpacker": "github:rails/webpacker",

    "@tailwindcss/aspect-ratio": "^0.2.0",

    "@tailwindcss/forms": "^0.2.1",

    "@tailwindcss/typography": "^0.3.1",

    "autoprefixer": "^10.0.2",

    "clipboard": "^2.0.4",

    "core-js": "3",

    "flatpickr": "^4.6.1",

    "js-cookie": "^2.2.0",

    "jstz": "^2.0.0",

    "local-time": "^2.1.0",

    "pdf-lib": "^1.12.0",

    "postcss": "^8.1.7",

    "slim-select": "^1.23.1",

    "sortablejs": "^1.12.0",

    "stimulus": "^2.0.0",

    "stimulus-flatpickr": "^1.2.4",

    "tailwindcss": "^2.0.1",

    "tailwindcss-stimulus-components": "^2.0.0",

    "tippy.js": "^6.0.0",

    "tributejs": "^5.0.0",

    "trix": "^1.2.0",

    "turbolinks": "^5.2.0",

    "webpack": "^5.11.0"

  },

error

TypeError: Cannot read property 'toWebpackConfig' of undefined
    at Object.<anonymous> (/config/webpack/development.js:5:30)

removing it doesn't help, doing a fresh reset doesn't help

The latest version of webpacker, 6.2.2 or so, breaks, it does not export environment as expected so configs require updating.

Using `yarn update` caused this issue. It installed the @next version of rails webpacker

Ended up with the same error and realizing that I am very uninformed about webpack lol. Any luck with this? Or any tips for moving forward?

UPDATE 2:
As Chris Oliver   spotted here, the issue I was having after pushing to production was related to how Webpacker is naming versions with 'pre' instead of 'alpha'. Removing the ^ from "@rails/webpacker": "^6.0.0-beta.2", in package.json fixed the issue. So the version should look like "6.0.0-beta.2" until the next update. This also fixes TypeError: merge is not a function if you're using merge in webpack/base.js

The recent Jumpstart commits fix the original issue though (thanks Chris Oliver !), so the fix described in my original comment is no longer relevant.

UPDATE 1: (Fixed)
Apparently I'm not out of the woods yet. After pushing to Heroku to confirm this worked in production, I get the following error:

ERROR in Conflict: Multiple assets emit different content to the same filename js/.br

I apologize, I should have confirmed this worked in prod before posting. I'll update if I find what's going on.

ORIGINAL COMMENT:

Hey, just wanted to share how I got things up and running again. I'm not really familiar with webpack, so please take this all with a grain of salt! Also, please note that I have gone a little off the beaten path, so some of these steps might have been specific to my build or might not be relevant since newer updates to Jumpstart.

I started by following along with the webpacker guide at https://github.com/rails/webpacker/blob/master/6_0_upgrade.md so it looked like:

1) Rename config/webpack to config/webpack_old
2) Rename config/webpacker.yml to config/webpacker_old.yml
3) Upgrade webpacker:

# Gemfile
gem 'webpacker', '~> 6.x' # replace '.x' with whichever version is current/relevant to you

bundle

yarn add @rails/webpacker@next

bundle exec rails webpacker:install

4) Change javascript_pack_tag and stylesheet_pack_tag to javascript_packs_with_chunks_tag and stylesheet_packs_with_chunks_tag
5) The guide says to reference https://github.com/rails/webpacker#integrations for adding integrations like css, so for me that meant:
5.1) enabling css support with: yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
5.2) enabling postcss support with: yarn add postcss-loader
5.3) enabling sass support with: yarn add sass sass-loader

6) At this point I got an error about having both a .browserslistrc and package.json with browsers so I simply removed the .browserslistrc and kept the list in package.json (this might have been something that I accidentally added to my project in the past however)

7) Next up, the guide says to copy over any custom config from the config/webpack_old folder, there was nothing that I ended up copying over for my project.

8) The guide ends here, but I still had a few errors to deal with (mostly missing packages):
8.1) I had to rename any references to .scss files to include the extension. For example, import "stylesheets/application" had to become import "stylesheets/application.scss" ... I'm probably just missing something config-wise that required this step.
8.2) I received some errors about missing modules (might also be specific to my project), this led to me running the following:

yarn add postcss-flexbugs-fixes

yarn add postcss-preset-env

I'm pretty sure that I also ran bundle and yarn upgrade somewhere in there as well.

But all that together did the trick for me. Once again though, I'm pretty new to this kind of stuff and my project has gone a little off path from Jumpstart. It would probably be best to first attempt this with a fresh Jumpstart project, as I'm not sure what issues I ran into because of my own project. If I get some free time I'll try this with a fresh clone and see what was actually needed. There's a good chance too that I might have missed a step in writing this, but the error messages I was getting while trying to fix this were somewhat helpful for finding what was missing (like missing modules) so I was just using the errors to guide this process. So far it looks like everything is working again for me, but I'll report back if I find any additional issues.

Hope this helps! 

Is crazy, but simply worked for me. Thanks!