/bin/webpack-dev-server fails - "TypeError: chunk.sortModules is not a function"

[LeoArouca]

I am upgrading my rails 5.1.4 app webpacker gem to 3.0.1. After running:
bundle exec rails webpacker:install

And yarn install, when i try to run webpacker in dev mode and start my passenger it fails with this:

ubuntu@ubuntu-xenial:/vagrant/my_web_app$ ./bin/webpack-dev-server --hot true
 13% building modules 28/28 modules 0 active
Project is running at http://0.0.0.0:3001/
webpack output is served from http://0.0.0.0:3001/packs/
Content not from webpack is served from /vagrant/my_web_app/public/packs
404s will fallback to /index.html
 78% advanced chunk optimization/vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/dist/index.js:188
            chunk.sortModules();
                  ^

TypeError: chunk.sortModules is not a function
    at /vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
    at /vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3083:16
    at eachOfArrayLike (/vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1003:9)
    at eachOf (/vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1051:5)
    at Object.eachLimit (/vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3145:5)
    at Compilation.<anonymous> (/vagrant/my_web_app/node_modules/@rails/webpacker/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (/vagrant/my_web_app/node_modules/tapable/lib/Tapable.js:142:13)
    at Compilation.seal (/vagrant/my_web_app/node_modules/webpack/lib/Compilation.js:579:8)
    at /vagrant/my_web_app/node_modules/webpack/lib/Compiler.js:493:16
    at /vagrant/my_web_app/node_modules/tapable/lib/Tapable.js:225:11

Versions

Ruby 2.4.2
Rails 5.1.4
Node 8.4.0
Yarn 1.0.2
Webpacker (gemfile) 3.0.1

Any suggestions?

[gauravtiwari]

@LeoArouca Could you please remove node_modules folder and reinstall modules again?

rm -rf node_modules
yarn

 # (optional)
yarn upgrade @rails/webpacker

[LeoArouca]

Thank you @gauravtiwari . I tried that and still got the same results. I checked webpack and it seems this used to be an issue before version 3.3.0, but we are running 3.5.5 on our project here.

Any other ideas?

[akaspick]

If your yarn.lock file still contains most of the dependencies that were part of webpacker2, I deleted them as they're now contained in webpacker3. I actually just deleted my yarn.lock and reinstalled everything to get things going again.

[LeoArouca]

Ok, thank you @akaspick , I upgraded these dependencies in package.json to get webpacker to compile:

From
"sass-loader": "^6.0.5"
"babel-loader": "7.x"
"webpack": "^2.6.1"

To
"sass-loader": "^6.0.6"
"babel-loader": "7.1.2"
"webpack": "^3.6.0"

Then I had to run webpack-dev-server without --hot true to work.

Now I am having some issues with a jpg asset not being found by rails in the manifest.

ActionView::Template::Error - Webpacker can't find app_logo.png in /vagrant/my_web_app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:

Now I am not sure this is the right place to solve this, or if its better to close this issue?

thanks
Leo

[akaspick]

Heh, I JUST opened #854 for the exact same issue. I'd say you can close this one though.

[LeoArouca]

Cool, closing this one and following yours.

Cheers!

[this-miguel]

I was having this same issue and changing the versions as @LeoArouca suggested worked for me :)

[Timzt]

yeah! npm install --save-dev webpack@3.6.0 take my trouble.