Webpacker: Webpack build breaks after upgrading webpacker from 3.0.2 to 3.2.0

[ijdickinson]

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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" 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

[gauravtiwari]

Please could you do following and see if it fixes it:

rm -rf node_modules
yarn add @rails/webpacker
yarn

Then run: bin/webpack

[ijdickinson]

@gauravtiwari Same result, I'm afraid

[hovancik]

Maybe this is related to my issue? https://github.com/rails/webpacker/issues/1178

[gauravtiwari]

@ijdickinson Have you followed the upgrade instructions? A lot has changed between version 2 and 3. Could you please double check all configs has been updated after upgrade? I can't reproduce this issue.

[hovancik]

@gauravtiwari: he is mentioning going from 3.0.2 to 3.2.0, not from 2

[gauravtiwari]

@ijdickinson Is this still an issue for you?

[ijdickinson]

@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

[gauravtiwari]

What happens if you do yarn add @rails/webpacker?

[gauravtiwari]

What version of yarn are you using?

[ijdickinson]

No change if I yarn add @rails/webpacker.

$ yarn -v
1.3.2

[gauravtiwari]

Ahh right - this looks strange because all dependencies are handled by @rails/webpacker package.

Please add vue loader.

bundle exec rails webpacker:install:vue

[jonknapp]

We may have run into a related issue today, but only on our CI server (CodeShip). It runs fine until we started to bring in a few other package.json dependencies:

• turbolinks: "^5.1.1",
• webpack-jquery-ui: "^1.0.0"

From then forward it would not add application.js to the manifest file and if I tried to compile with webpacker on the server I got the Can't resolve 'babel-loader' error.

Interestingly, the webpack-jquery-ui brings in an older v2 version of webpack. Not sure if that's what's throwing things off or not, but it seems likely. I'll try to add more info here if we determine what the issue actually is.

We are also running Rails v5.2.0.rc1

[maschwenk]

I had a similar issue but with sass-loader but fixed it by adding it to the dev dependencies (rather than just a dependency of webpacker...that seems weird though?

[mapreal19]

@maschwenk similar too here but with style-loader

[maschwenk]

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

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

[mattduggan]

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.

[maschwenk]

If you trim out all the dependencies that are depended on by webpack and move webpack/webpacker out of devDeps and into deps it may fix it.

[mattduggan]

Not sure I follow @maschwenk.

@rails/webpacker and webpack are both in my package.json.dependencies, not package.json.devDependencies.

While I did resolve this by explicitly adding style-loader to dependencies, I didn't explicitly add sass-loader nor css-loader. However, they are defined by @rails/webpacker package.json.dependencies, and the app still works (as expected) so I'm not sure what to make of that.

[maschwenk]

hmmm, unsure then, that's exactly how I solved it in my case. You can see how it can make sense, it only breaks in production because yarn install --production is dropping anything in devDeps (and hence can't resolve style-loader)....but if you have everything in deps then unsure. I can only suggest:

1. (as an experiment) moving everything out of devdeps into deps. If you're using webpack in a Rails project there's really not a huge difference between dev and non-dev deps
2. upgrading webpacker

outside of that, I'm stumped

[mapreal19]

experienced the same as @mattduggan. Did too yarn add style-loader to get on in life, but curious also on how to solve this

[lokyoung]

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.

[musashimm]

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

[gauravtiwari]

Could you please share your package.json? You don't need to add style loader separately since the JS package already comes bundled with it - https://github.com/rails/webpacker/blob/master/package.json#L35

[musashimm]

@gauravtiwari my file below as gist.

package.json

package_old.json compiles with error:
ERROR in ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css Module parse failed: Unexpected token (18:2) You may need an appropriate loader to handle this file type. | | | p { | font-size: 2em;

package_new.json compiles without error.

[ytbryan]

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

[mcmire]

Just ran into this. For me the error went away when I removed webpack (even though yarn will produce a warning saying that webpack-dev-server needs it as a peer dependency). YMMV.

[prusswan]

@mattduggan Is that on heroku? I had the same error

Edit: Turns out the build is botched on local as well, I had to remove react-scripts from devDependenices (only webpack-dev-server remains now)

Edit2: Re-added react-scripts via yarn add --dev react-scripts , now it works locally but fails on heroku (style-loader not found)

[prusswan]

Needs confirmation, but after extensive testing on Heroku, the problem seems to happen when there are multiple webpack versions specified in yarn.lock. In my case, Heroku tries to use 3.12, which results in the error. Locally, it resolves to 3.8, no errors. So the fix is to move react-scripts to dependencies, resulting in a single webpack 3.12 in yarn.lock.

[mattduggan]

Production is Heroku @prusswan, thanks for the tip. I do see multiple versions for webpack in the yarn.lock which resolves to 3.11.

[maschwenk]

This is why I'll reiterate my previous comment https://github.com/rails/webpacker/issues/1178#issuecomment-382535270

[mattduggan]

I reiterate that the dependencies which are needed in production are all in dependencies, not devDependencies.

[rally25rs]

I just ran into this with a new install (to an older rails 4 project)

vagrant@vagrant-ubuntu-trusty-64:~/projects/web$ bundle exec rake webpacker:install
I, [2018-10-12T19:04:12.549043 #17644]  INFO -- : Celluloid 0.17.3 is running in BACKPORTED mode. [ http://git.io/vJf3J ]
...output omitted...
Webpacker successfully installed 🎉 🍰

vagrant@vagrant-ubuntu-trusty-64:~/projects/web$ bundle exec rake webpacker:compile
I, [2018-10-12T19:05:51.138305 #17826]  INFO -- : Celluloid 0.17.3 is running in BACKPORTED mode. [ http://git.io/vJf3J ]
Webpacker is installed 🎉 🍰
Using /home/vagrant/projects/web/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:
(node:17861) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
(node:17861) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

(node:17861) DeprecationWarning: Compilation.applyPlugins is deprecated. Use new API on `.hooks` instead

Hash: 8850cadab22a687d517f
Version: webpack 4.20.2
Time: 127ms
Built at: 2018-10-12 19:05:57

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/home/vagrant/projects/web'

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/home/vagrant/projects/web'

@rails/[email protected]
yarn 1.10.1
node 8.12.0
OS ubuntu trusty 64

---

Edit:

I think I resolved this by adding some root level devDependencies

yarn add @babel/core@^7.0.0 babel-loader -D

[gauravtiwari]

Please try the latest RC, otherwise feel free to open a new issue with more details.

[shelmire]

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.

[cd-rum]

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