Heroku error: didn't find any digests file && ActionView::Template::Error (Can't find hello_react)

[ytbryan]

Step to reproduce:

1. rails new myapp -d postgresql
2. add webpacker to gemfile gem 'webpacker', :git => "https://github.com/rails/webpacker.git"
3. bundle install
4. rails webpacker:install
5. rails webpacker:install:vue
6. rails webpacker:compile
7. use the <%= javascript_pack_tag 'hello_vue' %>
8. test on localhost (It works*)
9. heroku create webpacker-demos-123
10. git remote add
11. push to heroku (don't work*)

ERROR (didn't find any digests file)

remote: Using webpacker 1.0 from https://github.com/rails/webpacker.git (at master@8f584dd)
remote: Bundle complete! 16 Gemfile dependencies, 54 gems now installed.
remote: Gems in the groups development and test were not installed.
remote: Bundled gems are installed into ./vendor/bundle.
remote: Bundle completed (3.32s)
remote: Cleaning up the bundler cache.
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: I, [2017-02-25T01:31:43.346954 #437] INFO -- : Didn't find any digests file at /tmp/build_a7f573d5e29cf560546c07e2807f75aa/public/packs/digests.json. You must first compile the packs via rails webpacker:compile
remote: sh: 1: ./node_modules/webpack/bin/webpack.js: not found
remote: !
remote: ! Precompiling assets failed.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to webpacker-demos.
remote:
To https://git.heroku.com/webpacker-demos.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/webpacker-demos.git'
pushing to origin/master

To fix the above error, turns out I need to rake assets:precompile instead of rails webpacker:compile. Should the error message be modified?

Once the assets are precompiled. Pushing to heroku works but leads to another error ( ActionView::Template::Error (Can't find hello_react))

2017-02-25T01:41:14.753037+00:00 heroku[router]: at=info method=GET path="/" host=webpacker-demos.herokuapp.com request_id=44e6cff5-5bbc-46d9-b84c-ced9704e12c3 fwd="138.75.142.195" dyno=web.1 connect=0ms service=35ms status=500 bytes=1669
2017-02-25T01:41:14.730223+00:00 app[web.1]: I, [2017-02-25T01:41:14.730082 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Started GET "/" for 138.75.142.195 at 2017-02-25 01:41:14 +0000
2017-02-25T01:41:14.734543+00:00 app[web.1]: I, [2017-02-25T01:41:14.734419 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Processing by FrontpagesController#index as HTML
2017-02-25T01:41:14.750165+00:00 app[web.1]: I, [2017-02-25T01:41:14.750028 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Rendering frontpages/index.html.erb within layouts/application
2017-02-25T01:41:14.752474+00:00 app[web.1]: I, [2017-02-25T01:41:14.752379 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Rendered frontpages/index.html.erb within layouts/application (2.1ms)
2017-02-25T01:41:14.752779+00:00 app[web.1]: I, [2017-02-25T01:41:14.752711 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Completed 500 Internal Server Error in 18ms
2017-02-25T01:41:14.754036+00:00 app[web.1]: F, [2017-02-25T01:41:14.753928 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3]
2017-02-25T01:41:14.754105+00:00 app[web.1]: F, [2017-02-25T01:41:14.754040 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] ActionView::Template::Error (Can't find hello_react-e57d9d18a79d866e81fe in #<Webpacker::Digests:0x007f46977f3110 @path=#Pathname:/app/public/packs/digests.json, @digests={}>):
2017-02-25T01:41:14.754371+00:00 app[web.1]: F, [2017-02-25T01:41:14.754297 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 1: <\h1>Hello world!
2017-02-25T01:41:14.754373+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 2:
2017-02-25T01:41:14.754375+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 3: <%# javascript_pack_tag 'hello_vue-819142dc19b77ca48015' %>
2017-02-25T01:41:14.754376+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 4: <%= javascript_pack_tag 'hello_react-e57d9d18a79d866e81fe' %>
2017-02-25T01:41:14.754426+00:00 app[web.1]: F, [2017-02-25T01:41:14.754370 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3]
2017-02-25T01:41:14.754492+00:00 app[web.1]: F, [2017-02-25T01:41:14.754436 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] app/views/frontpages/index.html.erb:4:in `_app_views_frontpages_index_html_erb___4234948065689000601_69970601556860'

Is this related to existing issues? I'm still digging

[sealocal]

Which version of Rails are you using?

[gauravtiwari]

@ytbryan Do you have the repo somewhere on github? You generally don't need to do assets:precompile, there is a hook that does that when rails run assets:precompile on production.

webpacker/lib/tasks/webpacker.rake

Line 140 in 652afad

# Compile packs after we've compiled all other assets during precompilation

I will try your steps and see if I can reproduce it. Mostly likely it's related to Rails version you have used.

[sealocal]

From the error log above:

remote: sh: 1: ./node_modules/webpack/bin/webpack.js: not found

I suspect that yarn is not globally available - I've been running into this same problem, but when deploying to Amazon Linux.

Using webpacker 1.0 with Rails 5.0, that hook executes, but webpack.js is not installed because yarn install did not successfully install the node_modules (again, because yarn is not available) so the assets fail to precompile.

I hope that makes sense!

[ytbryan]

@sealocal Rails 5.0.1

@gauravtiwari https://github.com/ytbryan/webpacker-demos

gonna be away for the next two days, will look at all these info and dig into it when i'm back.

[gauravtiwari]

Thanks @ytbryan. @sealocal Yes I get the same error that webpack isn't found. If we use node buildpack for heroku it does detects yarn and run yarn install by default, which I can see in the log that it installs all dependencies but not the one listed in devDependencies, that's why it can't find webpack.

[gauravtiwari]

@ytbryan this works - https://webpacker-vue.herokuapp.com/ and code here - https://github.com/gauravtiwari/webpacker-vue

The only additions are - adding correct buildpacks for heroku

heroku buildpacks:set heroku/nodejs --index 1
heroku buildpacks:set heroku/ruby --index 2

And add a Procfile to run webpack dev server + configuration in development.rb

and moving all the devDependencies except webpack dev server to dependencies block. Strangely, yarn doesn't seem to install them on production. There are many issues filed on Github in same regards, here is one - yarnpkg/yarn#2739

[gauravtiwari]

@sealocal This explains more - https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production so, perhaps by default the gem installer should list those modules, which will be used in production should be under dependencies by default.

[sealocal]

You're right. I haven't tried deploying my app to Heroku - so I can see that you're saying Heroku installed only the production dependencies.

However, my problem is slightly different. On Beanstalk, yarn is not available to install on Amazon Linux Ruby. I've installed it manually, but would prefer to check for the binary and install upon deploy.

I'm using Beanstalk's Ruby platform:

 64bit Amazon Linux 2016.09 v2.3.1 running Ruby 2.3 (Puma)

I can open another issue for discussion around Beanstalk deployment.

[gauravtiwari]

@ytbryan Deployed updated version here - https://webpacker-demos-vue.herokuapp.com/ and made PR for you - ytbryan/webpacker-demos#1

[gauravtiwari]

@sealocal You can use .ebextensions as pre deploy hook to setup yarn for linux using this guide - https://yarnpkg.com/en/docs/install/#linux-tab ? As an example (not sure it works though),

#  Create a file .ebextensions/yarn.config
# Runs right before `npm install` in '.../50npm.sh'
"/opt/elasticbeanstalk/hooks/appdeploy/pre/49yarn.sh" :
    mode: "000775"
    owner: root
    group: users
    content: |
        #!/bin/bash
        app="/tmp/deployment/application";

        # install yarn
        wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo;
        curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -;
        yum -y install yarn;

        # Install deps
        cd "${app}";
        yarn --production;

Resource: http://www.eq8.eu/blogs/29-aws-elasticbeanstalk-deployment-hooks

[sealocal]

Heroku was discussed over here as well: #90 (comment)

Not sure if DHH still has an opposing view on the topic.

[sealocal]

@gauravtiwari Thanks for the input! Did you grab that yarn.config snippet from StackOverflow? You'll see my comment right below it : D

I get that there are pre/post deploy hooks on AWS, but I haven't found the right combination that works for me. That particular yarn.config file is for a AWS Elastic Beanstalk Node Platform, where I'm running a Ruby platform. I haven't found the magic combination of commands to issue to AWS on deploy to get yarn installed. Perhaps I'm thinking of it wrong, and I should just install yarn manually upon setting up the application - which I have been able to solve.

[gauravtiwari]

@sealocal everything moved to root folder so, now it's usual setup for yarn. #101

[gauravtiwari]

@sealocal Yeah, unfortunately I haven't used beanstalk, just EC2 :)

Is it not possible to manually install node.js platform too alongside ruby one?

[sealocal]

Actually node and npm are installed on the Ruby platform, but installing yarn so that the webapp user as global access to yarn (so that ./bin/yarn runs from the Rails root) has still been a challenge for me. I've had success installing globally twice, but failed to install multiple times, so my results are inconsistent.

[dleavitt]

I believe even once your buildpacks are set correctly and NPM_CONFIG_PRODUCTION is set to false your compilation will still fail due to a problem with the vue preset (see below.) All the more reason to spin these off into separate repos per #124.

Added a #125 so that errors like the below are actually visible. Will maybe add another PR to update the README with some Heroku instructions.

Module build failed: Error: 

Vue packages version mismatch:

- vue@2.1.10
- vue-template-compiler@2.2.1

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

@ytbryan Probably need to specify the vue versions in yarn add

[ytbryan]

@dleavitt this PR should fix the error.

Perhaps, in the short run, webpacker might wish to give a warning note to users on managing dependencies with./bin/yarn

[dleavitt]

Nice! okay for @gauravtiwari to close this ticket?

[swrobel]

I was having this issue on Heroku and realized it was because yarn won't install devDependencies when NODE_ENV=production. I fixed this by setting heroku config:set YARN_PRODUCTION=false

[gauravtiwari]

@swrobel This is fixed on master, please do bundle update and try again. Let me know.

[swrobel]

@gauravtiwari fixed on master without the ENV var, thanks!