webpacker: Can't properly compile assets on heroku?

I’ve tried to build this dozens of times on production using react_on_rails, but keep getting the following error:

Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       ReactOnRails: Set generated_assets_dir to default: public/webpack/production
       cd /tmp/build_f34d4e61a9f55dec692297dd2593a818 && RAILS_ENV=production bin/webpack
       /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/lib/webpacker/webpack_runner.rb:11:in `exec': No such file or directory - /tmp/build_f34d4e61a9f55dec692297dd2593a818/node_modules/.bin/webpack (Errno::ENOENT)
       from /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/lib/webpacker/webpack_runner.rb:11:in `block in run'
       from /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/lib/webpacker/webpack_runner.rb:10:in `chdir'
       from /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/lib/webpacker/webpack_runner.rb:10:in `run'
       from /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/lib/webpacker/runner.rb:6:in `run'
       from /tmp/build_f34d4e61a9f55dec692297dd2593a818/vendor/bundle/ruby/2.4.0/gems/webpacker-3.2.0/exe/webpack:8:in `<top (required)>'

I’ve come across https://github.com/rails/webpacker/pull/727 and https://github.com/rails/webpacker/issues/739, but still having issues. I’ve tried deploying via Travis CI, and running yarn install during the build.

My heroku buildpacks are:

1. heroku/ruby
2. heroku/nodejs

I’ve ensured the following by running heroku run bash in my environment:

Heroku is using yarn v 1.0.2.
~/node_modules/.bin/webpack exists.

If I manually run rake webpacker:compile via heroku’s command line, it says it successfully gives me this:

Webpacker is installed 🎉 🍰
Using /app/config/webpacker.yml file for setting up webpack paths
ReactOnRails: Set generated_assets_dir to default: public/webpack/production
Compiling…
Compiled all packs in /app/public/packs

At which point I can see all the packs I need in ~/public/packs.

I’ve been racking my brain over this for days and not too sure what else to try.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (5 by maintainers)

Links to this issue

Rails 6, Tailwind and Heroku

Most upvoted comments

Thanks for your note @ericscottmarquez and @nerboda.

https://github.com/rails/webpacker/issues/739#issuecomment-327259829 confirms this.

The following should fix this issue:

heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby

+25

rickychilcott on Dec 2, 2018

Buildpack index 1 should be node. Buildpack index 2 should be ruby. Your procfile should tell it where to build each side of the app front end being webpack/node modules and back end being rails. You can do something like a procfile like this:

Procfile

web: bundle exec puma -p $PORT webpack: bin/webpack-dev-server

+12

ericscottmarquez on Oct 24, 2018

Thanks for your note @ericscottmarquez and @nerboda.

#739 (comment) confirms this.

The following should fix this issue:
heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby

👍

https://github.com/rails/webpacker/blob/master/docs/deployment.md

juanmanuelramallo on Sep 29, 2019

@dben89x did you ever figure this out?

nerboda on May 23, 2018

If you’re using rails and node, a good way to do this without buildpacks would be to use rails in ‘api mode’, deploy on heroku, and point it to your node app, deployed as a separate app. You can encrypt the json in each request.

ericscottmarquez on Nov 1, 2019

i know this issue is closed, but i just wanted to get a sense if anyone else has an issue with this configuration requiring a lot of devDependencies to be added as app dependencies? An example of this is that any babel dependencies would typically be included as devDependencies in a normal Node.js environment, but because the compilation/build step can’t happen until after devDeps are pruned in heroku, they have to be included as app dependencies. Just seems less than ideal. Anyone else agree or have input?

jkepps on Nov 1, 2019

any babel dependencies would typically be included as devDependencies in a normal Node.js environment

They generally would not. See my exhaustive discussion on why this is the case, here is a part of it:

devDependencies have more usefulness in the context of a JS library.

Let’s take webpack as an example. Notice that react is installed under devDependencies.

If you are developing for the webpack library locally, it would install react.

If you are developing for a rails app that lists webpack as a dependency, it would NOT install react. This is because webpack does not need react to function, therefore it does not need to pass the lib downstream.

Your rails app is “the end of the JS line”, you don’t need to worry about downstream users. I am aware that many READMEs will tell you to use --save-dev, but devDependencies offer no practical use in the context of webpacker.

TL;DR: If you need something to build your production bundle, it cannot be placed in devDependencies. (including: webpack, typescript, node-sass, sass-loader)

jakeNiemiec on Nov 1, 2019

Did you guys give up?? I’m having this problem too. Never give up!

ericscottmarquez on Oct 12, 2018