`@vitejs/plugin-react-swc` Refresh wrapper erroneously added to non-component, error in Web Worker

[kenlyon]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-rsc

Describe the bug

I have a react project that imports some type information from another package for use by a typescript service which is running in a web worker.

The file in question just exports one Record<string, string> where the key is the path to a .d.ts file and the value is the content of said file.

I expect this file to be treated as a regular file without the need for HMR or anything fancy - it's just data. This was all fine until I upgraded @vitejs/plugin-react-swc and started to see ReferenceError: window is not defined in the console. This led me through the inner workings of vite until I finally discovered this in the plugin:

const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;

This regular expression was matching within a string and causing the refresh wrapper to be added to the file and ultimately the script failing to load.

If the module was being used directly in the react app, this additional wrapping would cause no harm. However, because the module was being loaded within a web worker, the window object is not available and so you get the console error.

Reproduction

https://stackblitz.com/edit/vitejs-vite-1pqwywfy?file=src%2FApp.tsx

Steps to reproduce

There is technically no error without using a web worker. I hope what I have is adequate to prove the flaw in the logic, though. If not, let me know and I'll see if I can add a basic web worker to the example.

The instructions are on the page, but I will repeat them here:

Observe the network traffic for the loading of two files. Despite both containing just strings, example1.ts is given a refresh wrapper but example2.ts is not.

This is because the former includes what appears to be a declaration of a react component. The plugin uses a regular expression that matches this, failing to detect that it is within a literal string.

This does not cause any problem here because they are being loaded within a window. However, if example1.ts was used by a web worker, loading it would fail with an error about window not being defined.

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 10.97 GB / 31.45 GB
  Binaries:
    Node: 22.20.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 4.14.1 - C:\nvm4w\nodejs\yarn.CMD
    npm: 10.9.3 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 148.0.7778.97
    Edge: Chromium (146.0.3856.72)
    Firefox: 150.0.3 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.8115

Used Package Manager

yarn

Logs

Vite does not generate an error in the logs. The only evidence of the issue is in the browser console when it fails to load the affected module using a web worker.

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.
• 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.

[ArnaudBarre]

Thanks for the bug report. Yet another example of regex being a bad thing for this 😅

Running an SWC plugin to detect if a class component was in the AST would be the safe thing to do, but we need to measure the perf impact. In the meantime, always skipping the refresh wrapper for non JSX files is simple and fixes your issue

[kenlyon]

@ArnaudBarre Is that something I can change via the configuration or would it require a new release?

I think I tried tinkering with the parserConfig when investigating this bug but maybe I just didn't quite get it right. I had to essentially copy and paste most of the default implementation and just try to get it to return something different for .ts files. Is that the sort of thing you mean?

[ArnaudBarre]

It's quite complex to fix this without a new release. We will try to get the next one quickly
If you want to try a fix today, you will need to have the parserConfig returns undefined for example1.ts and then copy back the code for .ts/.tsx.
Then you need to make example1.ts become JS by writing a small plugin like this: (pseudo code):

{
  name: "transform-example-1"
  transform: {
     filter: /example1.ts/,
     handler: (code) => {
        return transformWithOxc(code)
     }
  }
}

[kenlyon]

That's interesting - I might look into it. I'm still on an older version of vite so I'd need to use something other than Oxc, but I see what you're saying.

In the short term, I worked around the problem by replacing Component with Componen_ when generating the file and then changing it back where I import the module. It's a bit of a hack, but this is a bit of a side-quest on a bigger task so I don't want to spend too long on it.