Heroku Precompiling assets failed #530

paulreeve · 2017-06-22T14:01:51Z

Hey!

I've been having an issue deploying my app to Heroku.

Stack

Rails 5.0
Webpacker
Webpacker-react
Using Typescript (.tsx files )

My output is this:

remote:        Done in 8.20s.
remote:        Webpacker is installed 🎉 🍰
remote:        Using /tmp/build_b8406178707ebacf3768cba8736dc830/config/webpacker.yml file for setting up webpack paths
remote:        [Webpacker] Compiling assets 🎉
remote:        error Command failed with exit code 2.
remote:        
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy....
remote:

I'm not sure what config to provide to you at this point but am happy to.
I have tried many remedies (like postinstall > rebuild node-sass) but no cigar.

My application.js looks like this:

import Transaction from './transactions/Transaction';

import WebpackerReact from 'webpacker-react';

WebpackerReact.setup({Transaction});

If I change Transaction to Transaction.tsx then webpack seems to be skipped altogether and no assets are built.

My typescript webpack loader looks like this:

module.exports = {
  test: /app\/javascript\/packs\/.*.tsx/,
  loader: 'ts-loader'
}

My webpacker.yml looks like this:

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
    
  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx

development:
  <<: *default

  dev_server:
    host: 0.0.0.0
    port: 8080
    https: false

test:
  <<: *default

  public_output_path: packs-test

production:
  <<: *default

My tsconfig looks like this:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "public",
    "app/javascript/__tests__"
  ],
  "compileOnSave": false
}

I kinda have nothing left to try really. For the record, everything works perfectly locally.

Thanks in advance

The text was updated successfully, but these errors were encountered:

gauravtiwari · 2017-06-22T14:15:13Z

@paulreeve You got yarn binstub inside bin folder?

gauravtiwari · 2017-06-22T14:15:37Z

Oh that shouldn't be related since you are on Rails 5.0

paulreeve · 2017-06-22T14:18:19Z

It's hard to know if it is a ts, webpack, react or rails issue. As there is not output from the fail. Tricky.

gauravtiwari · 2017-06-22T14:21:05Z

@paulreeve Could you try this please - in config/webpack/production.js set warnings: true and then deploy again 👍 . Also can you compile fine locally? NODE_ENV=production RAILS_ENV=production rails assets:precompile --trace

paulreeve · 2017-06-22T14:21:40Z

Thanks, I will try that now

gauravtiwari · 2017-06-22T14:21:45Z

I mean inside uglify plugin setting - set warnings: true

paulreeve · 2017-06-22T14:31:36Z

ok, seems a little more chatty now 🗣

So I now get:

remote:        Webpacker is installed 🎉 🍰
remote:        Using /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/config/webpacker.yml file for setting up webpack paths
remote:        [Webpacker] Compiling assets 🎉
remote:        [Webpacker] Compilation Failed
remote:        yarn run v0.24.5
remote:        $ "/tmp/build_cac91d5a7fad50aecc4902730b4a31ce/node_modules/.bin/webpack" --config /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/config/webpack/production.js
remote:        ts-loader: Using [email protected] and /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/tsconfig.json
remote:        Hash: 10c2affc0c4ee5d0c84c
remote:        Time: 22183ms

Then my React components build

remote:        [77] ./app/javascript/packs/transactions/Transaction.tsx 6.37 kB {0} {3} [built]

...etc

Then a waterfall of info.

THEN at the end

remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.module.ts
remote:        (1,31): error TS2307: Cannot find module '@angular/platform-browser'.
remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.module.ts
remote:        (2,26): error TS2307: Cannot find module '@angular/core'.
remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.component.ts
remote:        (1,27): error TS2307: Cannot find module '@angular/core'.
remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/index.ts
remote:        (3,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.
remote:        info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote:        error Command failed with exit code 2.

A whole bunch of Angular fun...

ytbryan · 2017-06-22T15:03:30Z

is it because of missing escaping ? 5481c66

this looks weird:

module.exports = {
  test: /app\/javascript\/packs\/.*.tsx/,
  loader: 'ts-loader'
}

Should it be just like this?

module.exports = {
  test: /\.tsx$/,
  loader: 'ts-loader'
}

paulreeve · 2017-06-22T15:12:18Z

hmm sadly not @ytbryan. It could be that though. I may try and mess with it to see if I can get it to work. Any idea what the Angular references are all about?

paulreeve · 2017-06-22T16:03:11Z

I had test: /app\/javascript\/packs\/.*.tsx/, as I have my tests in app/javascript/__tests__ and I wanted them to not be bundled.

So I just changed to

module.exports = {
  test: /\.tsx$/,
  loader: 'ts-loader'
}

Works locally. I still get the same issue. Maybe it is because the Angular examples are expecting it to contain ts rather than tsx...lemme check that by adding both...

So I changed to

module.exports = {
  test: /\.(ts|tsx)$/,
  loader: 'ts-loader'
}

and I still get the complaining about the Angular examples. Is there an assumption that if I'm using TS then I'm also using Angular perhaps?

gauravtiwari · 2017-06-22T16:10:15Z

@paulreeve Is yarn install being run on heroku?

gauravtiwari · 2017-06-22T16:10:45Z

Could you paste full heroku logs please?

paulreeve · 2017-06-22T16:15:16Z

soooooo.......

I added "vendor/bundle" to my tsconfig.json and bingo 🎉

My full tsconfig.json now looks like this:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "public",
    "vendor/bundle"
  ],
  "compileOnSave": false
}

Worth adding to the README or something?

Thanks for your help though @gauravtiwari @ytbryan - you helped me flush that one out.

gauravtiwari · 2017-06-22T16:25:29Z

remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.module.ts
remote:        (1,31): error TS2307: Cannot find module '@angular/platform-browser'.
remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.module.ts
remote:        (2,26): error TS2307: Cannot find module '@angular/core'.
remote:        ERROR in /tmp/build_cac91d5a7fad50aecc4902730b4a31ce/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-da4e5103adb3/lib/install/examples/angular/hello_angular/app/app.component.ts
remote:        (1,27): error TS2307: Cannot find module '@angular/core'.

Ahh right on, the logs explains it 👍 We should add it it to tsconfig.json

roger-link · 2017-07-12T18:51:21Z

I was having the same issue. Everything worked locally but when I ran:

bundle exec rake ASSET_HOST=${ASSET_HOST} NODE_ENV=production RAILS_ENV=production assets:precompile --trace

The only error I got was error Command failed with exit code 2.

To fix the problem I forked webpacker and added $stdout.puts in install.rake. That got to see that in my case we had a file import referenced in application.js as index and it was actually named Index. Which I guess makes sense somehow that it never got referenced locally but it did in production mode.

Feel free to use it for debugging: https://github.com/roger-link/webpacker

gauravtiwari · 2017-07-12T22:11:06Z

Could you please try latest master now?

ankitrg · 2017-07-19T11:02:45Z

There are few points that I found the hard way which you should consider. Always use include this ts-loader will use this and not the webpack entry path to determine what to look at.

  "include": [
    "./app/javascript/"
  ]

The webpack may crash too if you don't do this.

gauravtiwari · 2017-08-15T17:36:25Z

This is fixed on master 👍

Deploying is causing an error during asset generation which seems to be a fixed issue as documented here: rails/webpacker#530

tiberius-ls · 2021-08-19T11:28:39Z

You can simply update webpacker using yarn add @rails/[email protected]

gauravtiwari added the help wanted label Jun 30, 2017

gauravtiwari closed this as completed Aug 15, 2017

yuta-ushijima mentioned this issue Aug 20, 2017

Modify webpack production.js mc-chinju/like-slack#81

Closed

curvo mentioned this issue Sep 17, 2017

Fails to deploy to Heroku #821

Closed

robyparr added a commit to robyparr/adjourn that referenced this issue Oct 30, 2017

Update webpacker to ~> 3.0:

859e4e9

Deploying is causing an error during asset generation which seems to be a fixed issue as documented here: rails/webpacker#530

reconstructions mentioned this issue Dec 24, 2017

Heroku deployment fails with rake task error starting in commit #421 shakacode/react-webpack-rails-tutorial#429

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Heroku Precompiling assets failed #530

Heroku Precompiling assets failed #530

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017 •

edited

Loading

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

ytbryan commented Jun 22, 2017 •

edited

Loading

paulreeve commented Jun 22, 2017

paulreeve commented Jun 22, 2017 •

edited

Loading

gauravtiwari commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

roger-link commented Jul 12, 2017 •

edited

Loading

gauravtiwari commented Jul 12, 2017

ankitrg commented Jul 19, 2017 •

edited

Loading

gauravtiwari commented Aug 15, 2017

tiberius-ls commented Aug 19, 2021

Heroku Precompiling assets failed #530

Heroku Precompiling assets failed #530

Comments

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017 • edited Loading

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

ytbryan commented Jun 22, 2017 • edited Loading

paulreeve commented Jun 22, 2017

paulreeve commented Jun 22, 2017 • edited Loading

gauravtiwari commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

paulreeve commented Jun 22, 2017

gauravtiwari commented Jun 22, 2017

roger-link commented Jul 12, 2017 • edited Loading

gauravtiwari commented Jul 12, 2017

ankitrg commented Jul 19, 2017 • edited Loading

gauravtiwari commented Aug 15, 2017

tiberius-ls commented Aug 19, 2021

gauravtiwari commented Jun 22, 2017 •

edited

Loading

ytbryan commented Jun 22, 2017 •

edited

Loading

paulreeve commented Jun 22, 2017 •

edited

Loading

roger-link commented Jul 12, 2017 •

edited

Loading

ankitrg commented Jul 19, 2017 •

edited

Loading