Webpack plugin causes Typescript build errors when React component annotation is enabled

[willgardner9]

Environment

• "@sentry/webpack-plugin": "^2.16.0"
• "webpack": "^5.91.0"
• "typescript": "^5.4.3"
• package.json
• webpack.config.js
• tsconfig.json
• babel.config.js

Steps to Reproduce

I have created a minimal reproduction of the issue here.

To reproduce:

1. Use a Typescript generic within your React project (e.g. line 11 of src/app.tsx of the minimal reproduction)
2. Attempt to build your project using a webpack config that uses the Sentry webpack plugin with react component annotation enabled
3. The build errors

The build succeeds if you either:

• Do not have any Typescript generics in your source code (e.g. line 11 of src/app.tsx is commented out)
• Have Typescript generics but don't have React component annotation enabled (e.g. line 25 of webpack.config.js is set to enabled: false)

Expected Result

Webpack build succeeds, with React component annotation enabled. This is observable through the data-sentry-component data attributes being present in the bundle.

Actual Result

The build fails, here is an example log (with some unnecessary logs removed/truncated) from the minimal reproduction:

npm run build

> sentry-webpack-react-component-annotation-minimal-repro@1.0.0 build
> webpack --output-path dist

assets by status 139 KiB [cached] 2 assets
modules by path ./node_modules/ 141 KiB
  modules by path ./node_modules/react-dom/ 130 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.production.min.js 129 KiB [built] [code generated]
  modules by path ./node_modules/react/ 6.94 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.production.min.js 6.75 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 4.33 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.14 KiB [built] [code generated]
modules by path ./src/*.tsx 3.38 KiB
  ./src/index.tsx 371 bytes [built] [code generated]
  ./src/app.tsx 3.02 KiB [built] [code generated] [1 error]

ERROR in /[redacted]/sentry-webpack-react-component-annotation-minimal-repro/src/app.tsx
./src/app.tsx 35:18-50
[tsl] ERROR in /[redacted]/sentry-webpack-react-component-annotation-minimal-repro/src/app.tsx(35,19)
      TS2347: Untyped function calls may not accept type arguments.
ts-loader-default_e3b0c44298fc1c14
 @ ./src/index.tsx 3:34-50

webpack 5.91.0 compiled with 1 error in 3386 ms

[lforst]

@0Calories mind taking a look?

[mydea]

is this still an issue/relevant? cc @lforst

[lforst]

Actually yes probably. Delegating to @0Calories when he finds time.