Still got DeprecationWarning on Webpack 5

[Vincent0700]

I'm already update deps to latest but still get the deprecation warinning. Does the problem need to be fixed? Or just add the flag "--no-deprecation" to disable it.

environment:

"ts-loader": "^8.0.5",
"ts-node": "^9.0.0",
"webpack": "^5.1.0"

commands:

$ node --trace-deprecation node_modules/webpack/bin/webpack.js --config=build/webpack.prod.config.ts
(node:12757) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at outputFileToAsset (/Users/Vincent/Playground/config-table/node_modules/ts-loader/dist/after-compile.js:216:35)
    at outputFilesToAsset (/Users/Vincent/Playground/config-table/node_modules/ts-loader/dist/after-compile.js:224:13)
    at addDeclarationFilesAsAsset (/Users/Vincent/Playground/config-table/node_modules/ts-loader/dist/after-compile.js:210:5)
    at provideDeclarationFilesToWebpack (/Users/Vincent/Playground/config-table/node_modules/ts-loader/dist/after-compile.js:206:9)
    at /Users/Vincent/Playground/config-table/node_modules/ts-loader/dist/after-compile.js:30:9
    at Hook.eval [as callAsync] (eval at create (/Users/Vincent/Playground/config-table/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:5:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Vincent/Playground/config-table/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/Vincent/Playground/config-table/node_modules/webpack/lib/Compiler.js:986:33
    at /Users/Vincent/Playground/config-table/node_modules/webpack/lib/Compilation.js:2025:10
    at Hook.eval [as callAsync] (eval at create (/Users/Vincent/Playground/config-table/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
asset index.js 259 bytes [emitted] [minimized] (name: index)
asset index.d.ts 37 bytes [emitted]
./src/index.ts 217 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 1684 ms

[johnnyreilly]

There may be other deprecation warnings that still need remedying. We've had 2 contributions to remedy this so far, we'd happily welcome more ❤️🌻

#1195
#1047

cc @Delagen @sanex3339

[appzuka]

I am using webpack 5.1.3 and ts-loader 8.0.5 and not getting any deprecation warnings. Maybe you could try again with 5.1.3 and if you are still getting deprecation warnings post a minimal repository which demonstrates the issue.

[ath0mas]

@appzuka I have the same kind of trace for a simple build with declaration, like described in ahrakio/witty-webpack-declaration-files#4.
Try a clone of https://github.com/ns0m/witty-webpack-declaration-files, and then in /example directory change some versions: webpack to 5.1.2 or 5.1.3, and webpack-cli to 4.0.0 + npm run build

[appzuka]

@ath0mas, Thanks for the info. I see that the warning occurs when "declaration": true is specified in tsconfig.json.

The warning comes when makeAfterCompile is called from instances.js, which happens twice:

ts-loader/src/instances.ts

Line 346 in 6d8d601

makeAfterCompile(instance, instance.configFilePath)

ts-loader/src/instances.ts

Line 397 in 6d8d601

makeAfterCompile(instance, instance.configFilePath)

It is not quite as simple as replacing the afterCompile hook with afterProcessAssets as the first is a compiler hook and the second is a compilation hook. I'll try to take a look at a solution when I have time but if anyone else wants to have a go hopefully this is helpful.

[ath0mas]

(taking a step back from the webpack plugin example I linked previously)
I think the best example to work with is ts-loader/examples/vanilla/:

1. update the devDependencies versions in package.json
2. add "declaration": true in tsconfig.json
3. npm run build

[johnnyreilly]

Thanks for doing some investigation @appzuka - that's very helpful 🌻

[appzuka]

@johnnyreilly,

Currently, ts-loader gives webpack@^4.5.0 as a dev dependency and all tests are run under webpack 4. I believe I have a fix for this issue but it will fail under webpack 4. We can put a switch in the code similar to:

if (webpack4} {
    loader._compiler.hooks.afterCompile.tapAsync(
      'ts-loader',
      makeAfterCompile(instance, instance.configFilePath)
    );
} else {
    loader._compilation.hooks.afterProcessAssets.tap('ts-loader', (_: any) => {
      makeAfterCompile(instance, instance.configFilePath)(
        loader._compilation,
        () => {
          return null;
        }
      );
    });
}

I have not yet fully tested this but I believe it may fix this issue. I see a problem that the new code will not be tested at all when you run yarn tests. Do the release tests run the code under webpack 5? I note that if I upgrade the dev dependency to webpack 5 the build and all tests are broken.

I guess in an ideal world the tests may be run under multiple versions of webpack and typescript but I can see this could be complex. An alternative would be to make a new major version, ts-loader@9 which is only for webpack 5. What are your thoughts on supporting both webpack 4 and webpack 5?

[johnnyreilly]

Hey @appzuka,

Thanks for your thoughts.

I guess in an ideal world the tests may be run under multiple versions of webpack and typescript but I can see this could be complex. An alternative would be to make a new major version, ts-loader@9 which is only for webpack 5. What are your thoughts on supporting both webpack 4 and webpack 5?

Ideally we'll have ts-loader support both webpack 4 and 5 for some time. However, there's some caveats with that. We have 2 test packs:

• comparison tests
• execution tests

Comparison tests look at the output from webpack, that differs from version to version and so the comparison test pack will always be hard bound to one webpack version. Incidentally, we only run / maintain the comparison test pack for the latest version of TypeScript also. Anything else would be too expensive in terms of human power. There's only so much time!

Execution tests transform TypeScript to JavaScript and execute tests in Karma. These are very reliable and should work regardless of TypeScript version or webpack version I think. So I'd be keen to implement this and amend our test pack so it runs with webpack 5 in that context.

Longer term, when webpack 5 is more established, we'll probably do a major changes version (as you suggest) which drops support for webpack 4 entirely. Older versions of ts-loader will be on npm forever for those that need them. However I don't plan that to happen this side of Christmas at the earliest.

[ath0mas]

(taking a step back from the webpack plugin example I linked previously)
I think the best example to work with is ts-loader/examples/vanilla/:

1. update the `devDependencies` versions in _package.json_

2. add `"declaration": true` in _tsconfig.json_

3. `npm run build`

No more warning using version 8.0.6: perfect! 💯

[johnnyreilly]

Well done @appzuka!