Did 4.0.0+ become incompatible with awesome-typescript-loader & hot-reload?

[SpencerGreene]

This is a Bug Report (or misconfiguration on my side)

Description

• What went wrong?
  I upgraded from serverless-webpack 2.2.3 to latest, and serverless-offline no longer hot-reloads serverless-offline in local. It throws an error "Unhandled rejection TypeError: Cannot read property 'watcher' of undefined" as further detailed below. Digging into awesome-typescript-loader, it appears that "watching.compiler.watchFileSystem.wfs" is undefined.

In triangulating versions, I see that this error is not thrown for serverless-webpack up to and including 3.1.2. It is thrown for 4.0.0 onward.

• What did you expect should have happened?
  When saving a change to the code of an endpoint, the running serverless-offline should recompile and continue without throwing error.

• What was the config you used?

var path = require('path');
var webpack = require('webpack');
var slsw = require('serverless-webpack');
var GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin();
var nodeExternals = require('webpack-node-externals');

module.exports = {
    entry: slsw.lib.entries,
    devtool: 'inline-source-map',
    target: 'node',
    externals: [
        'aws-sdk',
        // Possible drivers for knex - we'll ignore them
        'sqlite3',
        'mariasql',
        'mssql',
        'mysql2',
        'mysql',
        'oracle',
        'strong-oracle',
        'oracledb',
        'pg-query-stream',
        nodeExternals()
    ],
    module: {
      loaders: [
          {
              test: /\.ts(x?)$/,
              loader: 'awesome-typescript-loader',
              exclude: /node_modules/,
              query: {
                  presets: ['es2015', 'stage-0']
              }
          }
      ]

      },
    resolve: {
        extensions: ['.ts', '.js', '.tsx', '.jsx']
    },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js'
    },
    plugins: [
        new webpack.IgnorePlugin(/\.\/native/),
        new webpack.DefinePlugin({
          'VERSION': JSON.stringify(gitRevisionPlugin.version()),
          'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
          'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
        })    
      ]
};

and tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "allowJs": false,
    "alwaysStrict": true
  },
  "exclude": [
    "node_modules"
  ],
  "lib": [
    "es7",
    "esnext"
  ],
  "types": [
    "node",
    "aws-sdk"
  ]
}

• What stacktrace or error message from your provider did you see?

Unhandled rejection TypeError: Cannot read property 'watcher' of undefined
    at Compiler.<anonymous> (/Users/sgreene/src/gl-api/node_modules/awesome-typescript-loader/src/instance.ts:369:54)
    at next (/Users/sgreene/src/gl-api/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/Users/sgreene/src/gl-api/node_modules/webpack/lib/CachePlugin.js:48:5)
    at Compiler.applyPluginsAsyncSeries (/Users/sgreene/src/gl-api/node_modules/tapable/lib/Tapable.js:206:13)
    at Watching._go (/Users/sgreene/src/gl-api/node_modules/webpack/lib/Compiler.js:48:17)
    at Watching.compiler.readRecords.err (/Users/sgreene/src/gl-api/node_modules/webpack/lib/Compiler.js:40:9)
    at Compiler.readRecords (/Users/sgreene/src/gl-api/node_modules/webpack/lib/Compiler.js:391:11)
    at new Watching (/Users/sgreene/src/gl-api/node_modules/webpack/lib/Compiler.js:37:17)
    at Compiler.watch (/Users/sgreene/src/gl-api/node_modules/webpack/lib/Compiler.js:222:20)
    at startWatch (/Users/sgreene/src/gl-api/node_modules/serverless-webpack/lib/wpwatch.js:37:32)
    at BbPromise.fromCallback.cb (/Users/sgreene/src/gl-api/node_modules/serverless-webpack/lib/wpwatch.js:75:17)
    at tryCatcher (/Users/sgreene/src/gl-api/node_modules/serverless-webpack/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.fromNode.Promise.fromCallback (/Users/sgreene/src/gl-api/node_modules/serverless-webpack/node_modules/bluebird/js/release/promise.js:180:30)
    at serverless.pluginManager.spawn.then (/Users/sgreene/src/gl-api/node_modules/serverless-webpack/lib/wpwatch.js:74:32)
    at tryCatcher (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/usr/local/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
    at processImmediate [as _immediateCallback] (timers.js:697:5)

Additional Data

• Serverless-Webpack Version you're using: 2.2.3 and 3.1.2 work fine, 4.0.0 and other 4.x and 5.x versions fail.
• Webpack version you're using: 3.11.0
• Serverless Framework Version you're using: 1.30.0
• awesome-typescript-loader version you're using: 3.5.0
• Operating System: macOS
• Stack Trace (if available):

Also tried with serverless-webpack 5.2.0, webpack 4.19.1, and awesome-typescript-loader 5.2.1. After updating webpack.config to webpack4 style, it throws exactly the same error.

[HyperBrain]

Hi @SpencerGreene , that's strange. I'm quite sure that it works with all newer release of the plugin. Maybe there is just some small thing wrong ... @serverless-heaven/serverless-webpack-contributors any idea?

[franciscocpg]

I'm using ts-loader without any problems. One can verify this by using aws-nodejs-typescript template (sls create --template aws-nodejs-typescript --path aws-nodejs-typescript). Add serverless-offline plugin (sls plugin install --name serverless-offline) and run sls offline start. Edit handler.ts and hot reload just works.

About the error, the stack points to this:
https://github.com/s-panferov/awesome-typescript-loader/blob/9bbc0656032a006d4cc9f083a5c24af989927e6d/src/instance.ts#L368-L369.

So watching.compiler.watchFileSystem or watching.compiler.watchFileSystem.wfs is undefined.

@SpencerGreene

Maybe you can try to use aws-nodejs-typescript template and then add serverless-offline and replace ts-loader by awesome-typescript-loader to try to isolate the problem.

At first I'm not sure this problem is specific to serverless-webpack plugin. I think it's a problem with awesome-typescript-loader (or at least with some configuration related to it).

[BobbieBarker]

I'm seeing very similar problems to what @SpencerGreene is seeing.

[morgothulhu]

FYI - I was able to get passed it by commenting the whole else block here: https://github.com/serverless-heaven/serverless-webpack/blob/master/lib/wpwatch.js#L69

Maybe we should have a new option on offline start to keep the watcher alive to make it friendly with ATL?

I am using latest versions of everything, and using babel with ATL

Package.json:

    "awesome-typescript-loader": "5.2.1",
    "serverless": "1.32.0",
    "serverless-offline": "3.31.2",
    "serverless-webpack": "5.2.0",
    "typescript": "3.1.6",
    "webpack": "4.25.1",
    "webpack-cli": "3.1.2",
    "webpack-node-externals": "1.7.2",

webpack.config.js:

const { CheckerPlugin } = require('awesome-typescript-loader');

...

    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          loader: 'awesome-typescript-loader',
          exclude: /node_modules/,
          options: {
            useBabel: true,
            useCache: true,
            babelCore: '@babel/core',
          },
        },

...

    plugins: [
      new CheckerPlugin(),

[justingrant]

One interesting thing I noticed about this problem is that the first hot reload succeeds. The failure happens after the hot-reload loads the new code. So I can get one (but only one) hot reload out of a debug session.

Also, I tried @morgothulhu's workaround of commenting out that else case and it worked flawlessly.

[Zn4rK]

This issue and #465 are related. Both are caused by #319.

I'm working on a fix for this whilst still supporting #319. I just need to write a few more tests and then I'll create a PR.

The only issue I'm having as of right now is that the peerDependency for webpack is >= 3.0.0 < 5.
I need to track down which version of webpack added compiler.hooks, and add a workaround for older versions than that (or bump the webpack peerDependency, but we should be able to support both).

[HyperBrain]

The PR will be part of the upcoming 5.3.0 release. I'll try to get the release schedule back to normal with the help of some people.

[HyperBrain]

Released with 5.3.0