Heroku Precompiling assets failed

[paulreeve]

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

[gauravtiwari]

@paulreeve You got yarn binstub inside bin folder?

[gauravtiwari]

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

[paulreeve]

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]

@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]

Thanks, I will try that now

[gauravtiwari]

I mean inside uglify plugin setting - set warnings: true

[paulreeve]

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 typescript@2.4.0 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]

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]

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]

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]

@paulreeve Is yarn install being run on heroku?

[gauravtiwari]

Could you paste full heroku logs please?

[paulreeve]

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]

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