Webpacker: Heroku Precompiling assets failed

Created on 22 Jun 2017 · 18Comments · Source: rails/webpacker

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

help wanted

Source

paulreeve

Most helpful comment

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.

paulreeve on 22 Jun 2017

👍3

All 18 comments

@paulreeve You got yarn binstub inside bin folder?

gauravtiwari on 22 Jun 2017

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

gauravtiwari on 22 Jun 2017

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

paulreeve on 22 Jun 2017

@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

gauravtiwari on 22 Jun 2017

👍2

Thanks, I will try that now

paulreeve on 22 Jun 2017

I mean inside uglify plugin setting - set warnings: true

gauravtiwari on 22 Jun 2017

👍1

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...

paulreeve on 22 Jun 2017

is it because of missing escaping ? https://github.com/rails/webpacker/commit/5481c6633bbfd88fc2995d95008f7430b2164f34

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'
}

ytbryan on 22 Jun 2017

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 on 22 Jun 2017

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?

paulreeve on 22 Jun 2017

@paulreeve Is yarn install being run on heroku?

gauravtiwari on 22 Jun 2017

Could you paste full heroku logs please?

gauravtiwari on 22 Jun 2017

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.

paulreeve on 22 Jun 2017

👍3

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

gauravtiwari on 22 Jun 2017

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

roger-link on 12 Jul 2017

Could you please try latest master now?

gauravtiwari on 13 Jul 2017

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.

ankitrg on 19 Jul 2017

This is fixed on master 👍

gauravtiwari on 15 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings

Related issues

webpack binstubs not found, but present?

Eearslya · 3Comments

Simply depending on @rails/webpacker isn't enough? Possibly need to add all dependencies to package.json

swrobel · 3Comments

Webpack compiling all assets - 404 returned when loading them

ilrock · 3Comments

How to import bootstrap

pioz · 3Comments

Missed "yarn install" when deploy

suhomozgy-andrey · 3Comments