Webpacker: Heroku compiles examples from webpacker gem

[aom]

I'm using

• webpacker gem 1.1.0
• enable vue
• for my Rails 4.2 app

I use typescript and have added typescript loader for it:

module.exports = {
  test: /\.ts(\.erb)?$/,
  loader: 'ts-loader',
  exclude: /node_modules|vendor\/bundle/
}

Development works as expected. But when I deploy to Heroku I get errors about missing packages from this gems examples directory.

[node ]
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        I, [2017-04-08T11:12:52.746771 #1319]  INFO -- sentry: ** [Raven] Raven 2.0.2 ready to catch errors
remote:        I, [2017-04-08T11:12:52.746892 #1319]  INFO -- sentry: ** [Raven] Raven 2.0.2 ready to catch errors
remote:        ** [Raven] Raven 2.0.2 ready to catch errors
remote:        yarn install v0.22.0
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        warning [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning "[email protected]" has incorrect peer dependency "vue-class-component@^4.3.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 8.23s.
remote:        Webpacker is installed 🎉 🍰
remote:        Using /tmp/build_8280002e54ea756a25d34e04552d0008/config/webpack/paths.yml file for setting up webpack paths
remote:        Compiling webpacker assets 🎉
remote:        (node:1434) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
remote:        parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
remote:        ** [Raven] Sending event 5cd6ce643c1847a298e9a2c256b12fea to Sentry
remote:        ** [Raven] Raven HTTP Transport connecting to https://sentry.io
remote:        rake aborted!
remote:        JSON::ParserError: 784: unexpected token at 'ts-loader: Using [email protected] and /tmp/build_8280002e54ea756a25d34e04552d0008/tsconfig.json
remote:        Hash: a83ec1f4ea9c9bdd4de3
remote:        Version: webpack 2.3.3
remote:        Time: 23723ms
remote:        Asset       Size                                Chunks             Chunk Names

[my assets]

remote:        + 132 hidden modules
remote:        ERROR in /tmp/build_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/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_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/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_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/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_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/lib/install/examples/angular/hello_angular/index.ts
remote:        (3,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.
remote:        '
remote:        /tmp/build_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/json_pure-1.8.3/lib/json/common.rb:155:in `parse'
remote:        /tmp/build_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/json_pure-1.8.3/lib/json/common.rb:155:in `parse'
remote:        /tmp/build_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/lib/tasks/webpacker/compile.rake:11:in `block (2 levels) in <top (required)>'
remote:        /tmp/build_8280002e54ea756a25d34e04552d0008/vendor/bundle/ruby/2.3.0/gems/webpacker-1.1/lib/tasks/webpacker/compile.rake:27:in `block in <top (required)>'
remote:        Tasks: TOP => webpacker:compile
remote:        (See full trace by running task with --trace)
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to HEROKUAPP.
remote:
To [email protected]:HEROKUAPP.git
 ! [remote rejected] origin/refact/webpack -> master (pre-receive hook declined)
error: failed to push some refs to '[email protected]:HEROKUAPP.git'
aborting

[ytbryan]

have you investigated this?

JSON::ParserError: 784: unexpected token at 'ts-loader: Using [email protected] and /tmp/build_8280002e54ea756a25d34e04552d0008/tsconfig.json

[gauravtiwari]

@aom Did you install ts-loader yourself and under devDependencies? Please see this issue for more details - https://github.com/rails/webpacker/issues/117

Basically, webpacker comes with a couple of installers so, please refer to this section in readme for more details on angular integration - https://github.com/rails/webpacker#ready-for-angular-with-typescript

[aom]

@ytbryan I didn't find any issues on my tsconfig.json so I moved on. Somehow it doesn't feel connected to webpack trying to compile files from wrong entry point. But I'll see how to fix that and see if it helps too.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "strictNullChecks": false,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  }
}

@gauravtiwari ts-loader is under dependencies. Only package in devDependencies is webpack-dev-server.

---

I failed to emphasise that I'm NOT using Angular. Instead I use Vue with typescript. Issue doesn't show up if you use Angular and have the packages required by examples.

[ytbryan]

Will you be able to share your repo? @aom

[aom]

@ytbryan Unfortunately I'm not able to share the repo.

Luckily issue was resolved today with some configs!

I returned to the issue today by adding excludes from Angular examples tsconfig.json. I included vendor/bundle in excluded array.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "strictNullChecks": false,
    "lib": [ "dom", "es5", "es2015.promise" ]
  },
  "exclude": [ "node_modules", "vendor/bundle", "public" ]
}

This also fixed the tsconfig parse issue. Though I'm not sure why :)

From my part this can be closed. I could do super simple PR to include vendor/bundle folder in Angulars tsconfig.json. But I believe explicit includes would be better than platform/use case specific excludes.

[gauravtiwari]

@aom Is this still an issue for you and related to webpacker?

[gauravtiwari]

@aom Closing this one now. Feel free to open a new issue if something pops up that's related to webpacker 👍