webpacker: Heroku Precompiling assets failed

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 19 (10 by maintainers)

Commits related to this issue

Most upvoted comments

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

I mean inside uglify plugin setting - set warnings: true