SyntaxError: Illegal property in declaration context

[horacioh]

Describe the bug

Using some external UI libraries, I'm getting this error when running tests that render some components.
I'm sure the error is with the library that points to (@stitches/react), but I'm not sure what is it!, or maybe is @radix-ui/react-scroll-area?? :(

Reproduction

here's a repo with an example: https://github.com/horacioh/vitest-declaration-context-issue

you can run this commands to see the error:

git clone <REPO>
cd <REPO>
yarn
yarn test

System Info

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 8.50 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.yvm/shim/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2021.11.15.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 96.1.32.115
    Chrome: 96.0.4664.110
    Firefox: 89.0.1
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.3
    vite: ^2.7.2 => 2.7.4
    vitest: ^0.0.100 => 0.0.100

### Used Package Manager

yarn

### Logs

```shell
➜ yarn test
yarn run v1.22.17
warning package.json: No license field
$ vitest

 DEV  /Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue

 ❯ App.test.tsx (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯


- App.test.tsx
SyntaxError: Illegal property in declaration context
 ❯ new Script node:vm:100:7
 ❯ createScript node:vm:257:10
 ❯ Object.runInThisContext node:vm:305:10
 ❯ directRequest file:/Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue/node_modules/vitest/dist/worker.js:9299:19
 ❯ async cachedRequest file:/Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue/node_modules/vitest/dist/worker.js:9328:12
 ❯ async src/scroll-area.tsx:2:31
      1| import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
      2| import { styled } from "@stitches/react"
       |                               ^
      3|
      4| const SCROLLBAR_SIZE = 6
 ❯ async directRequest file:/Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue/node_modules/vitest/dist/worker.js:9304:5
 ❯ async cachedRequest file:/Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue/node_modules/vitest/dist/worker.js:9328:12
 ❯ async src/App.tsx:8:31
 ❯ async directRequest file:/Users/horacio/workspace/oss/vitest/vitest-declaration-context-issue/node_modules/vitest/dist/worker.js:9304:5

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  no tests
      Time  1.76s (in thread 0ms, Infinity%)


 PASS  Waiting for file changes...
press any key to exit...

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitest-dev/vitest/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitest-dev/vitest/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitest.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitest-dev/vitest/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitest-dev/vitest/discussions) or join our [Discord Chat Server](https://chat.vitest.dev).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[sheremet-va]

This is a Vite bug.
It transforms this valid minified library code

const[d,p]=i("ScrollArea");export{p as createScrollAreaScope};const[f,h]=d("ScrollArea");export const ScrollArea=/*#__PURE__*/s.forwardRef(((e,r)=>{const{__scopeScrollArea:t,type:n="hover",scrollHideDelay:i=600,...a}

To invalid js:

Object.defineProperty(__vite_ssr_exports__, "createScrollAreaScope", { enumerable: true, configurable: true, get(){ return p }});const[f,h]=d("ScrollArea");const ScrollArea=/*#__PURE__*/__vite_ssr_import_9__.forwardRef(((e,r)=>{const{__scopeScrollArea:t,type:__vite_ssr_import_4__.useCallbackRef="hover",scrollHideDelay:__vite_ssr_import_6__.createContextScope=600,...a}

Invalid part:

type:__vite_ssr_import_4__.useCallbackRef="hover",scrollHideDelay:__vite_ssr_import_6__.createContextScope=600

Basicly it assumes that local variable n inside forwardRef callback is a reference to imported variable useCallbackRef since in the source code it is imported as import{useCallbackRef as n}from"@radix-ui/react-use-callback-ref"; Same goes for createContextScope

[antfu]

@sheremet-va Great finding! Fix: vitejs/vite#6224

[patak-dev]

Please upgrade to [email protected]

[horacioh]

Awesome!! thanks!!! 👏🏼👏🏼👏🏼