Does not play well with TypeScript 5 - Various TypeErrors

[aaronmcdavid]

This is halfway between a bug and a feature request, because I know TS 5 isn't supported yet, but figure it will be soon.

Current behavior

In a create-react-scripts application using TypeScript v5, the following messages occur at compile time:

TypeError: config.logger.error is not a function
    at C:\«proj»\node_modules\react-dev-utils\node_modules\fork-ts-checker-webpack-plugin\lib\hooks\tap-error-to-log-message.js:17:23
    at Hook.eval [as call] (eval at create (C:\«proj»\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\«proj»\node_modules\tapable\lib\Hook.js:14:14)
    at C:\«proj»\node_modules\react-dev-utils\node_modules\fork-ts-checker-webpack-plugin\lib\hooks\tap-done-to-async-get-issues.js:46:25
    at Generator.next (<anonymous>)
    at fulfilled (C:\«proj»\node_modules\react-dev-utils\node_modules\fork-ts-checker-webpack-plugin\lib\hooks\tap-done-to-async-get-issues.js:5:58)

and

TypeError: Cannot set property mark of #<Object> which has only a getter
TypeError: Cannot set property mark of #<Object> which has only a getter
    at Object.connectTypeScriptPerformance (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\profile\TypeScriptPerformance.js:12:36)
    at createTypeScriptReporter (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:40:49)
    at Object.<anonymous> (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:21:30)
    at Generator.next (<anonymous>)
    at C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:4:12)
    at C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:19:88
        at Object.<anonymous> (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\rpc\RpcService.js:23:38)
    at Generator.next (<anonymous>)
TypeError: Cannot set property mark of #<Object> which has only a getter
TypeError: Cannot set property mark of #<Object> which has only a getter
    at Object.connectTypeScriptPerformance (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\profile\TypeScriptPerformance.js:12:36)
    at createTypeScriptReporter (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:40:49)
    at Object.<anonymous> (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:21:30)
    at Generator.next (<anonymous>)
    at C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (C:\k«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:4:12)
    at C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\reporter\reporter-rpc\ReporterRpcService.js:19:88
    at Object.<anonymous> (C:\«proj»\node_modules\fork-ts-checker-webpack-plugin\lib\rpc\RpcService.js:23:38)
    at Generator.next (<anonymous>)

Expected behavior

No TypeError upon compilation.

Steps to reproduce the issue

Build a create-react-app application with the typescript template
In package.json: Set the version of the typescript package to 5.0.0-beta
In package.json: Add the following overrides section:

  "overrides": {
	"react-scripts": {
	  "typescript": "5.0.0-beta"
	},
	"react-dev-utils": {
	  "typescript": "5.0.0-beta"
	},
	"react-fork-ts-checker-webpack-plugin": {
	  "typescript": "5.0.0-beta"
	}
  },

Run npm install --legacy-peer-deps
Run npm run build

Environment

• fork-ts-checker-webpack-plugin: 7.3.0
• typescript: 5.0.0-beta
• eslint: 8.32.0
• webpack: 5.75.0
• os: Windows 22621.1105

[piotr-oles]

The TypeError: config.logger.error is not a function seems to be an issue on create-react-scripts and fork-ts-checker-webpack-plugin integration - it looks like someone pass custom formatter option with a formatter that doesn't implement error method.

The TypeError: Cannot set property mark of #<Object> which has only a getter is also weird - it's not coming from 7.3.0 (there is no connectTypeScriptPerformance function - it's from older version of the plugin). It looks like you might have different versions of the plugin installed simultaneously and your webpack instance picks up the older one.

[eamodio]

I see the TypeError: Cannot set property mark of #<Object> which has only a getter in version 6.5.2 the last one with eslint support (the performance loss by switching to the main eslint plugin was too huge).

Any chance of updating the 6.5.x branch to resolve this?

I hacked it locally (mostly commented out logging stuff) and was able to get things to work, but I'm not sure what I actually disabled/lost by doing that.

[piotr-oles]

The typescript performance stuff is not important - it's only for debugging purposes. I don't have time this week to fix that, feel free to create a PR if you have a fix :)

[eamodio]

@piotr-oles I opened #803

[piotr-oles]

🎉 This issue has been resolved in version 6.5.3 🎉

The release is available on:

• npm package (@release-6.5.x dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[vago]

Hi @piotr-oles and @eamodio 👋🏼 thanks for fixing it on the 6.x.x branch as well! Since there isn't a good alternative for ESLint yet, we are stuck with 6.x version. It's great to be able to upgrade TypeScript to the latest with your fix! 🙇🏼