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

Created on 24 Sep 2017 · 8Comments · Source: rails/webpacker

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?

Source

LeoArouca

Most helpful comment

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

LeoArouca on 25 Sep 2017

🎉3 👍2

All 8 comments

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

rm -rf node_modules
yarn

 # (optional)
yarn upgrade @rails/webpacker

gauravtiwari on 24 Sep 2017

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?

LeoArouca on 25 Sep 2017

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.

akaspick on 25 Sep 2017

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

LeoArouca on 25 Sep 2017

🎉3 👍2

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

akaspick on 25 Sep 2017

Cool, closing this one and following yours.

Cheers!

LeoArouca on 25 Sep 2017

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