Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Heroku Precompiling assets failed #530

Closed
paulreeve opened this issue Jun 22, 2017 · 18 comments

Comments

Projects
None yet
5 participants
@paulreeve
Copy link

commented Jun 22, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

@paulreeve You got yarn binstub inside bin folder?

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

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

@paulreeve

This comment has been minimized.

Copy link
Author

commented Jun 22, 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.

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 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

@paulreeve

This comment has been minimized.

Copy link
Author

commented Jun 22, 2017

Thanks, I will try that now

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

I mean inside uglify plugin setting - set warnings: true

@paulreeve

This comment has been minimized.

Copy link
Author

commented Jun 22, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jun 22, 2017

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

This comment has been minimized.

Copy link
Author

commented Jun 22, 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

This comment has been minimized.

Copy link
Author

commented Jun 22, 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?

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

@paulreeve Is yarn install being run on heroku?

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

Could you paste full heroku logs please?

@paulreeve

This comment has been minimized.

Copy link
Author

commented Jun 22, 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.

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2017

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

This comment has been minimized.

Copy link

commented Jul 12, 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

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Jul 12, 2017

Could you please try latest master now?

@ankitrg

This comment has been minimized.

Copy link

commented Jul 19, 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.

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

commented Aug 15, 2017

This is fixed on master 馃憤

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

Update webpacker to ~> 3.0:
Deploying is causing an error during asset generation which
seems to be a fixed issue as documented here:
rails/webpacker#530
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.