Error precompiling assets while deploying to Heroku with webpack

Question

I have a project that I've recently upgraded to rails 5.2, and I'm using the webpacker gem. I get the following error trying to deploy to Heroku:

...
remote:        Webpacker is installed  
remote:        Using /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/config/webpacker.yml file for setting up webpack paths
remote:        Compiling…
remote:        Compilation failed:
remote:        /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `exec': No such file or directory - /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/node_modules/.bin/webpack (Errno::ENOENT)
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `block in run'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `chdir'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `run'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/runner.rb:6:in `run'
remote:         from ./bin/webpack:15:in `<main>'
...

Locally my 'node_modules' directory is in .gitignore (I believe one of the webpacker install scripts put it there).

Do I need to un-ignore node_modules, or is there something I need to add to the config file to tell the remote where to find webpack?

Here's my package.json:

{
  "dependencies": {
    "@rails/webpacker": "3.5.5",
    "babel-preset-react": "^6.24.1",
    "d3": "^5.7.0",
    "jquery": "^3.3.1",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-addons-transition-group": "^15.6.2",
    "react-dom": "^16.5.2",
    "react-transition-group": "^2.4.0",
    "react_ujs": "^2.4.4"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  },
  "engines": {
    "yarn": "1.10.1"
  } 
}

I noticed the output from heroku mentioned setting up webpacker paths using config/webpacker.yml, but I can't find any mention in that file of looking for webpack in node_modules - here is the text of 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:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

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

The entire project can be found on github

Answer 1

I finally resolved this issue by rebuilding the /bin directory using the following:

rails app:update:bin

I reasoned that I must have corrupted something in that directory. I had started the project using the rails-jquery and rails-react gems and then used the webpacker install scripts to install jquery and react. I decided to use yarn add ... to add jquery and rails so I could manage my dependencies more tightly and consistently with yarn.

Answer 2

I had a huge chain of issues that merely started with the above error.

It led me on a convoluted journey across the web. I hope these ideas may help someone else.

Here's what I did:

1.

Ensure node buildpack is set on heroku (I haven't work out why this wasn't necessary in the past and suddenly it is, but that's for another time)

heroku buildpacks:add --index 1 heroku/nodejs

2.

Note I'm not sure if this step is actually necessary, because I removed the environment variables after everything was working, and it worked all the same without them. So I suspect you can skip this step. But note that others have reported it worked for them, so it could be worth a shot.

Set these environment variables on heroku.

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false
# Note: you can unset them with 
# heroku config:unset NPM_CONFIG_PRODUCTION YARN_PRODUCTION
# If you decide you don't want them

3.

There's progress, but now I got this error message instead

configuration.node should be one of these: false | object { __dirname?, __filename?, global? }

It was because:

Rails' webpacker 5.x.x is only compatible with webpack 4.x.x (https://github.com/rails/webpacker/tree/5-x-stable). You might want to downgrade to webpack 4 :)

So I simply ran yarn add webpack@4.46.0 to add the most recent 4.x.x version of webpack.

---

Then, finally, pushing to heroku worked!

Answer 3

I was able to precompile your assets on my local machine using yarn 1.10.1. Heroku may use an older version of yarn, which might cause some problems with webpacker 3.

So try upgrading to the latest version of yarn, and then run the following on your local machine:

# reinstall the node_modules
yarn install

# this is what heroku does to precompile your assets
bundle exec rake assets:precompile

This should update your yarn.lock file. If all works, then try git committing and pushing again.

Hopefully that will sort it. Good luck.