Webpacker: Upgrade guide from 3.x.x to 4.x.x

[humphreybc]

Hi, I am trying to upgrade our project from 3.x.x to 4.x.x and I'm having a lot of difficulty. Is there a step-by-step upgrade guide I can follow somewhere? What state is the 4.x.x release in?

I've tried simply blowing away our old configuration and running bundle exec rails webpacker:install but that doesn't work. I've run into https://github.com/rails/webpacker/issues/1295 and https://github.com/rails/webpacker/issues/1500 along with Cannot find module 'webpack/schemas/WebpackOptions.json' at various times while trying to upgrade to 4.x.x.

Some more information on what's required to migrate to 4.x.x would be great.

[gauravtiwari]

Thanks, @humphreybc The current 4.x release is a pre-release and there is some work still left to be done including documentation. We are working on this and hopefully should have a stable release in next 2 weeks.

But if you want to upgrade now, what happens if you follow these steps in your app:

yarn add @rails/[email protected]
yarn add webpack-cli

add 4.x version to gemfile and run bundle update

then run: bundle exec rails webpacker:install (please check diff before replacing existing files)

[humphreybc]

@gauravtiwari Thanks. I don't think you want bundle update since this will update all the gems. Instead, I think you mean bundle install so I proceeded with that instead.

Here's my experience following your instructions step-by-step.

Installing pre-release version

yarn add @rails/[email protected]

This added "@rails/webpacker": "4.0.0-pre.2" as a dependency to package.json.

Installing webpack-cli

yarn add webpack-cli

This added "webpack-cli": "^2.1.4" as a dependency to package.json.

Updating version in Gemfile

Add gem 'webpacker', '>= 4.0.x' to Gemfile.

bundle install

Output: Using webpacker 4.0.0.pre.pre.2 (was 1.2)

Running webpacker:install

bundle exec rails webpacker:install

This resulted in a bunch of conflicts. The files were dramatically different. In a past attempt, I decided to overwrite everything (starting fresh) and didn't get anywhere, so this time, I decided not to overwrite what was there already.

Here is a gist with our existing configuration files.

It's important to note that after running this command, I checked package.json and found that it had reverted to 3.5.3. Something in the webpacker:install script is installing 3.5.3. This is probably the cause of https://github.com/rails/webpacker/issues/1500.

"@rails/webpacker": "^3.5.3"

Running ./bin/webpack-dev-server

I get the following error:

humphreybc@Benjamins-MacBook-Pro ~/C/dovetail-rails> ./bin/webpack-dev-server
module.js:557
    throw err;
    ^

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/humphreybc/Code/dovetail-rails/node_modules/webpack-cli/bin/config-yargs.js:1:85)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)

Running ./bin/webpack

humphreybc@Benjamins-MacBook-Pro ~/C/dovetail-rails> ./bin/webpack

[at-loader] Using [email protected] from typescript and "tsconfig.json" from /Users/humphreybc/Code/dovetail-rails/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 2.091 sec.
Hash: 09bf022d3139eb2d20d0
Version: webpack 3.11.0
Time: 33749ms
             Asset       Size  Chunks                    Chunk Names
    application.js    7.41 MB       0  [emitted]  [big]  application
      collector.js    1.33 MB       1  [emitted]  [big]  collector
application.js.map    8.42 MB       0  [emitted]         application
  collector.js.map    1.45 MB       1  [emitted]         collector
     manifest.json  274 bytes          [emitted]         
   [3] ./node_modules/typestyle-react/lib.es2015/index.js + 1 modules 5.15 kB {0} {1} [built]
   [4] ./app/javascript/dovetail/variables.tsx 3.24 kB {0} {1} [built]
   [8] ./node_modules/typestyle/lib.es2015/index.js + 3 modules 14.8 kB {0} {1} [built]
  [13] ./app/javascript/dovetail/app/routing/index.tsx 352 bytes {0} [built]
 [546] ./app/javascript/packs/application.tsx 1.18 kB {0} [built]
 [547] ./app/javascript/dovetail/app/index.tsx 10.6 kB {0} [built]
 [596] ./app/javascript/dovetail/app/pages/NewNotePage/index.tsx 3.33 kB {0} [built]
 [651] ./app/javascript/dovetail/app/pages/ProjectSettingsPage/index.tsx 5.91 kB {0} [built]
 [711] ./app/javascript/dovetail/app/routing/NoteRouteInfo.tsx 1.09 kB {0} [built]
 [714] ./app/javascript/dovetail/ui/app/Header/index.tsx 8.07 kB {0} [built]
 [727] ./app/javascript/dovetail/ui/app/Tracker/index.tsx 1.7 kB {0} [built]
 [733] ./app/javascript/dovetail/app/pages/NewProjectPage/index.tsx 2.5 kB {0} [built]
 [734] ./app/javascript/dovetail/app/pages/NotePage/index.tsx 32.8 kB {0} [built]
[1080] ./app/javascript/packs/collector.tsx 487 bytes {1} [built]
[1081] ./app/javascript/dovetail/collector/index.tsx 6.53 kB {1} [built]
    + 1068 hidden modules

[vcavallo]

As @humphreybc said, _do not_ run the install script if you're doing a delicate and complicated upgrade.

I finally got my setup working with webpack-dev-server, Vue.js, Rails and Webpacker _served over nginx running on a remote dev vps_. I ssh in to a vps to do dev work and getting webpacker and the webpack dev server working there was ... fun!

This gist is sort of a mess because it was never intended for sharing, but maybe it might help someone else in a similar situation: https://gist.github.com/vcavallo/22cac63d01e3b73a56a92a619c6ff698

[shelmire]

I also had some minor trouble with the upgrade process.

I did:

yarn add @rails/[email protected]
yarn add webpack-cli
yarn upgrade [email protected]

Add gem 'webpacker', '>= 4.0.x' to Gemfile. Then,

bundle install

The trouble was with bundle exec rails webpacker:install. I went through looking at the diffs and said no to a few, but I missed it removing "react" from my .babelrc, so added it back. Be careful with this step in particular. For more complex setups, you may have to say no to more things, but note the changes the installer wants to make and manually adjust them.

[dreyks]

@gauravtiwari is there a roadmap to stable 4?

[gauravtiwari]

Just made another pre-release (with babel 7 support):

yarn add @rails/webpacker@next
bundle update webpacker

I will put the milestone in an issue. Mainly, I need to go through all the issues and merge engine support PR.

[gauravtiwari]

Please use the latest RC, and feel free to open a new issue with more details if this is still an issue.