Can't properly compile assets on heroku?

[dben89x]

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 #727 and #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.

[gauravtiwari]

@dben89x Probably something to do with react on rails may be if webpacker is compiling fine?

ReactOnRails: Set generated_assets_dir to default: public/webpack/production

Also, do you have webpack as dev dependency or app dependency in your package.json?

[dben89x]

I've been under the impression that webpack is being included as an app dependency via @rails/webpacker. This is my package.json:

{
	"engines": {
		"yarn": ">= 0.25.2"
	},
	"name": "skoot",
	"private": true,
	"dependencies": {
		"@rails/webpacker": "^3.2.0",
		"babel-preset-react": "^6.24.1",
		"coffeescript": "1.12.7",
		"jquery": "3.2.1",
		"moment": "2.20.1",
		"prop-types": "^15.6.0",
		"react": "^16.2.0",
		"react-bootstrap": "^0.31.0",
		"react-dom": "^16.2.0",
		"react-ios-switch": "0.1.19",
		"react-on-rails": "^10.0.2"
	},
	"devDependencies": {
		"webpack-dev-server": "^2.10.1"
	}
}

I think react_on_rails is just setting the output directory here. I get the same message from react_on_rails when I successfully compile it manually from the terminal. Any suggestions on how to check if it's one or the other?

Side note: when I run rails webpacker:compile it only compiles javascript, but I have images (.png) and fonts (.ttf) missing. Here is my webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .ttf

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

I've tried changing compile in production here to true as well. Doesn't do anything.

[gauravtiwari]

Were you able to fix this @dben89x ?

[gauravtiwari]

I've been under the impression that webpack is being included as an app dependency via @rails/webpacker.

Yes that's correct actually.

Everything looks good to me. Have you included nodejs buildpack on heroku?

[kevinelliott]

We are having the same problem.

[nerboda]

@dben89x did you ever figure this out?

[ericscottmarquez]

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

[i8ramin]

Same here. Why issue closed?

[ericscottmarquez]

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

[nerboda]

Sorry guys I forgot to come back here and post my solution back when I first figured it out but if I remember correctly @ericscottmarquez is right. The issue was the order of the buildpacks on heroku. Node needs to come first.

[rickychilcott]

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

[juanmanuelramallo]

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

[jkepps]

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?

[jakeNiemiec]

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)