webpacker: Webpack build breaks after upgrading webpacker from 3.0.2 to 3.2.0
Trying to resolve a different issue with Sass loading, I wanted to upgrade to the latest version of webpacker.
Initially, my build works:
$ bin/webpack
Using rake 12.3.0
Using concurrent-ruby 1.0.5
....
Version: webpack 3.8.1
Time: 7086ms
Asset Size Chunks Chunk Names
application-cc57b40167a66533aa3d.js 6.88 MB 0 [emitted] [big] application
courses-4ce8bddfd0759fb89928.js 1.68 MB 1 [emitted] [big] courses
application-cd852d95691ab89ba3e09a2ed750b46f.css 612 bytes 0 [emitted] application
manifest.json 206 bytes [emitted]
...
Then I update webpacker:
$ yarn outdated
yarn outdated v1.3.2
Package Current Wanted Latest Package Type URL
@rails/webpacker 3.0.2 3.2.0 3.2.0 dependencies https://github.com/rails/webpacker
babel-eslint 8.0.2 8.2.1 8.2.1 devDependencies https://github.com/babel/babel-eslint
caniuse-lite 1.0.30000766 1.0.30000791 1.0.30000791 dependencies https://github.com/ben-eb/caniuse-lite#readme
coffeescript 1.12.7 1.12.7 2.1.1 dependencies http://coffeescript.org
css-loader 0.28.7 0.28.8 0.28.8 dependencies https://github.com/webpack-contrib/css-loader
element-ui 2.0.5 2.0.11 2.0.11 dependencies http://element.eleme.io
eslint 4.11.0 4.15.0 4.15.0 devDependencies https://eslint.org
eslint-plugin-html 4.0.0 4.0.1 4.0.1 devDependencies https://github.com/BenoitZugmeyer/eslint-plugin-html
raven-js 3.20.1 3.22.0 3.22.0 dependencies https://github.com/getsentry/raven-js
vue 2.5.4 2.5.13 2.5.13 dependencies https://github.com/vuejs/vue#readme
vue-image-cropper 1.0.5 1.0.6 1.0.6 dependencies https://github.com/Elonsoft/vue-image-uploader#readme
vue-loader 13.5.0 13.7.0 13.7.0 dependencies https://github.com/vuejs/vue-loader
vue-template-compiler 2.5.4 2.5.13 2.5.13 dependencies https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme
webpack 3.8.1 3.10.0 3.10.0 dependencies https://github.com/webpack/webpack
webpack-dev-server 2.9.4 2.11.0 2.11.0 devDependencies https://github.com/webpack/webpack-dev-server
Done in 1.58s.
$ yarn upgrade '@rails/webpacker'
yarn upgrade v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Rebuilding all packages...
success Saved lockfile.
success Saved 596 new dependencies.
Now, my build is broken:
$ bin/webpack
Using rake 12.3.0
Using concurrent-ruby 1.0.5
Using i18n 0.9.1
...
Bundle complete! 41 Gemfile dependencies, 123 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Hash: 628a9cb45c5509b1c0e6
Version: webpack 3.8.1
Time: 43ms
Asset Size Chunks Chunk Names
manifest.json 2 bytes [emitted]
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/home/ian/workspace/personal-projects/greenwood-courses'
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/home/ian/workspace/personal-projects/greenwood-courses'
I have no idea where to begin looking for the problem, and would welcome any suggestions! Thanks
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 4
- Comments: 35 (14 by maintainers)
Commits related to this issue
- updated yarn.lock (rails/webpacker#1178) — committed to prusswan/d3ia-2e by prusswan 6 years ago
- updated yarn.lock (rails/webpacker#1178) — committed to prusswan/d3ia-2e by prusswan 6 years ago
I ran into this issue today on 3.4.3 deploying to production:
This is right after adding a style import to our first angular component.
The error doesn’t occur in development or test environments.
@rails/webpacker
package.json.dependencies
does liststyle-loader
so I would have expected it to be installed in production.yarn add style-loader
resolved the issue, but that leaves me scratching my head. Unless I’m misunderstandingyarn install
, perhaps this is a Yarn problem? I see this related issue.Writing in 2020,
yarn add style-loader
fixed my issue.I know this thread is quite old. But I ran into the error today when upgrading from 4.0.2 to 4.1 (then realized 4.2.2 is out). Problem was resolved by: bundle update webpacker and bumping to current version on @rails/webpacker and webpack and running yarn install. Just in case it helps some poor future traveler.
Your problem @musashimm is very likely related to
https://github.com/rails/webpacker/issues/1453#issuecomment-384670618. Please downgrade to vue-loader v14.2.2
Latest Rails ver.
5.2.0
I had to downgrade vue-loader from15.0.0
to14.2.2
buble-loader0.5.0
to0.4.1
to have Vue SFC compiled proprlyFound this issue too when upgrade to Rails
5.2.0
and webpacker3.4.3
. Previously i addstyle-loader
indevDependencies
and it works well. Now i gotModule not found: Error: Can't resolve 'style-loader'
error. Solved it by addstyle-loader
intodependencies
. But i’m not sure it’s the correct way since there is no issue before the upgrade.Hey all! I’m pretty sure all these issues can be resolved with the following:
webpack
out ofdevDependencies
and intodependencies
dependencies
@rails/webpacker
already depends on to a minimum@gauravtiwari I reverted to 3.0.2, because I was blocked on the upgrade and I’m up against a deadline with this project (isn’t it always the way!)
I’ve just tried again, and got the same behaviour. So I tried explicitly adding a dependency for babel:
That got me past the error message for
babel-loader
, but the build still breaks:It looks like webpack has somehow forgotten how to load
.vue
files. I’ve tried updating my version of Vue, but that didn’t help.I guess, fundamentally, I’m not sure what’s changing when I upgrade webpacker. But something is, and I’m afraid I still don’t have a way forward to build my app with 3.2.0