plugin-react: parse error when work with asset suffix

[ClarkXia]

Describe the bug

fail to import script as a Worker, when using @vitejs/plugin-react

id resolved with suffix like /xxx/src/worker.ts?worker can't apply parserPlugins of typescript

vite/packages/plugin-react/src/index.ts

Lines 205 to 207 in 4ffc9a5

	if (/\.tsx?$/.test(id)) {
	parserPlugins.push('typescript')
	}

Reproduction

Importing Script as a Worker

import Worker from './worker.ts?worker'
const worker = new Worker()

Use typescript in worker.ts

onmessage = function(e) {
  console.log('Worker: Message received from main script');
  const result: number = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    const workerResult = `Result: ${result}`;
    console.log('Worker: Posting message back to main script');
    postMessage(workerResult);
  }
};

System Info

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 139.68 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 15.0

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[IanVS]

I just spent a few hours digging into why my web-test-runner tests started to fail, and I think it's due to exactly this issue. Starting in version 1.0.8 of @vitejs/plugin-react, the logic was changed from:

const isTypeScript = /\.tsx?$/.test(extension)
if (isTypeScript) {
    parserPlugins.push('typescript')
}

to:

if (/\.tsx?$/.test(id)) {
    parserPlugins.push("typescript");
}

Note that the entire id is being checked now, not just the extension. I'll submit a PR.

[IanVS]

Hah, someone beat me to it. I think this can be closed by #5761.