Webpack cache-loader interferes with ts-loader

[b-zurg]

I'm not sure if this is something appropriate for here but I noticed something interesting. While using this recommendation from the readme:

const typescriptIsTransformer = require('typescript-is/lib/transform-inline/transformer').default

module.exports = {
    // I am hiding the rest of the webpack config
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    getCustomTransformers: program => ({
                        before: [typescriptIsTransformer(program)]
                    })
                }
            }
        ]
    }
};

I noticed that it only works when I don't use cache-loader in this rule. (e.g. rules: ['cache-loader', { loader: 'ts-loader', ...}
I believe the same goes for using ttypescript.

If this is a known then it might be good to mention it on the readme as that could save others time. But I'm a bit baffled by this.

Any insight?

[woutervh-]

hi @b-zurg

I didn't know this. I never used cache-loader so I don't know how it works or why it could interfere with the transformers.
Thanks for letting me know. I will have a look if it can be solved easily - or put up a warning message on the README.

[b-zurg]

Hi! I've done a little more investigation. Sorry my original post was misleading, but I had to work through some variation in my webpack config to really figure out what was going on.

The issue was the transpileOnly flag in ts-loader.

I was using this flag in combination with the fork-ts-checker-webpack-plugin like many others to speed up transpilation time while still having type safety. This was combined with cache-loader to speed things up even more which was a pretty effective combination. I originally thought that if I used ttypescript as my compiler this limitation wasn't there, though I did note that the readme mentioned you cannot use transpileOnly if you use webpack's getCustomTransformers.

So it turns out that both using the ttypescript compiler and getCustomTransformers need to have transpileOnly not enabled for the transformation to take place.

The reason I thought cache-loader was involved was because it was obfuscating my tests by somehow not invalidating the cache correctly when I changed the ts-loader settings.

This is the config I ended up with

  {
    test: /\.tsx?$/,
    exclude: /(node_modules)/,
    use: [
      "cache-loader",
      {
        loader: "ts-loader",
        options: {
          getCustomTransformers: program => ({
            before: [typescriptIsTransformer(program)],
          }),
        },
      },
    ],
  },

I think the readme could be a bit clearer about this, and maybe a mention of cache-loader as a mitigation to transpileOnly's speed gains.

[woutervh-]

Thank you @b-zurg

Sorry for huge delay on my side. I will release this soon!