Hey Oli, let's work through these Webpacker problems step by step—there are a few quick fixes and targeted checks that should get things up and running smoothly.

1. Fix the Critical Typo in package.json #

First off, I spotted a typo in your NPM dependencies that's almost certainly causing module resolution errors:

"@rails/webpackerj": "^6.0.0-pre.1"

That extra j at the end means yarn is installing a non-existent package instead of the official Webpacker package. Fix it to:

"@rails/webpacker": "^6.0.0-pre.1"

Then refresh your dependencies to apply the fix:

rm -rf node_modules yarn.lock
yarn install

2. Align Webpacker Gem and NPM Package Versions #

Your Gemfile uses an unversioned webpacker gem, which might pull a version that doesn't match your NPM package. To avoid version mismatches, specify the same pre-release version in your Gemfile:

gem 'webpacker', '~> 6.0.0.pre.1'

Then update your gems:

bundle install

3. Resolve the Missing @rails/activestorage Module #

Once you fix the Webpacker package typo, this error should disappear automatically. If it persists, manually install the missing module:

yarn add @rails/activestorage

Double-check that your app/javascript/packs/application.js import is correct (yours looks good):

require("@rails/activestorage").start()

4. Fix Pack File Mismatch with NGROK #

The issue where your app requests non-existent pack files through NGROK usually stems from incorrect asset URL generation. Here's how to fix it:

• Update Webpack Dev Server Public URL: When using NGROK, replace the dev_server.public value in webpacker.yml with your NGROK domain (e.g., abc123.ngrok.io:3035). This ensures Webpack generates asset URLs that match your public-facing domain.
• Use Rails' Helper Tags: Make sure your views use javascript_pack_tag 'application' instead of hardcoding paths. Rails will automatically generate the correct pack URL based on your Webpacker configuration.
• Verify Non-Digest Plugin: You're using non-digest-webpack-plugin—ensure it's properly configured in your Webpack config to generate non-digested filenames if that's what your app expects.

5. Clean Caches and Restart Services #

Old cache files can cause unexpected issues. Run these commands to clear everything out:

rails tmp:clear
bin/webpacker:clean
rm -rf tmp/cache/webpacker

Then restart both your Rails server and bin/webpack-dev-server to apply all configuration changes.

内容的提问来源于stack exchange，提问作者Oli