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

Most upvoted comments

I ran into this issue today on 3.4.3 deploying to production:

remote: Module not found: Error: Can't resolve 'style-loader' in '/tmp/build_c85a2c9fa96033a4d47d09bc24e028d2'

This is right after adding a style import to our first angular component.

import "./component.scss";

The error doesn’t occur in development or test environments.

@rails/webpacker package.json.dependencies does list style-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 misunderstanding yarn install, perhaps this is a Yarn problem? I see this related issue.

mattduggan on Apr 18, 2018

Writing in 2020, yarn add style-loader fixed my issue.

t56k on Jan 8, 2020

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.

shelmire on Dec 19, 2019

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

ytbryan on Apr 26, 2018

Latest Rails ver. 5.2.0 I had to downgrade vue-loader from 15.0.0 to 14.2.2 buble-loader 0.5.0 to 0.4.1 to have Vue SFC compiled proprly

musashimm on Apr 25, 2018

Found this issue too when upgrade to Rails 5.2.0 and webpacker 3.4.3. Previously i add style-loader in devDependencies and it works well. Now i got Module not found: Error: Can't resolve 'style-loader' error. Solved it by add style-loader into dependencies. But i’m not sure it’s the correct way since there is no issue before the upgrade.

lokyoung on Apr 22, 2018

Hey all! I’m pretty sure all these issues can be resolved with the following:

Move webpack out of devDependencies and into dependencies
Move anything remotely compilation-related into dependencies
Reduce any duplicate dependencies on packages that @rails/webpacker already depends on to a minimum

maschwenk on Mar 14, 2018

@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:

yarn add babel-loader babel-core

That got me past the error message for babel-loader, but the build still breaks:

$ bin/webpack
[...]
Bundle complete! 40 Gemfile dependencies, 121 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Hash: a4f70f0ce14bbeae9d11
Version: webpack 3.10.0
Time: 3595ms
                                  Asset       Size  Chunks                    Chunk Names
    application-e68d10703f066faeae5a.js    1.85 MB       0  [emitted]  [big]  application
        courses-9d0eb6d3dec1480f267c.js     710 kB       1  [emitted]  [big]  courses
application-e68d10703f066faeae5a.js.map    2.17 MB       0  [emitted]         application
    courses-9d0eb6d3dec1480f267c.js.map     726 kB       1  [emitted]         courses
                          manifest.json  266 bytes          [emitted]         
  [11] (webpack)/buildin/global.js 509 bytes {0} [built]
  [85] ./app/javascript/packs/application.js 698 bytes {0} [built]
 [172] ./app/javascript/app.vue 235 bytes {0} [built] [failed] [1 error]
 [173] ./app/javascript/router/index.js 1.59 kB {0} [built]
 [184] ./app/javascript/packs/courses.js 137 bytes {1} [built]
    + 197 hidden modules

ERROR in ./app/javascript/components/course-listing-landing.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template lang='html'>
|   <div class='c-course-listing'>
|     <div class='c-course-listing-new'  v-if='hasNewCourse'>
 @ ./app/javascript/router/index.js 9:0-76
 @ ./app/javascript/packs/application.js

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

ijdickinson on Jan 28, 2018