Bad code transformation for class fields if an import has the same name

[Monkatraz]

Describe the bug

Vitest seems to be generating a bad code transformation when a class field has the same name as an imported variable. This causes the script to fail.

Reproduction

Sorry for the lack of precision in the reproduction here, but I have successfully logged the bad code.
Original (some bits snipped for clarity):

import { clearTimeout, Timeout, timeout } from "@wikijump/util"
import { Gesture, GestureObserver, type Direction } from "./gesture"

export interface SwipeOpts {
   // - snip -
}

const SWIPE_DEFAULT_OPTS: SwipeOpts = {
  // - snip -
}

export class SwipeObserver {
  /** Swipe recognition configuration. */
  private declare opts: SwipeOpts

  /** List of valid swipe directions. */
  private declare directions: Direction[]

  /** Internal {@link GestureObserver} used to get gesture information. */
  private declare observer: GestureObserver

  /** The current {@link Gesture}. */
  private gesture: Gesture | null = null

  /** The currently running {@link Timeout}. */
  private timeout: Timeout | null = null

  /** True if the swipe recognition is running. */
  private running = false

  /** True if the current swipe gesture is being ignored. */
  private ended = false

  /** The element being tracked for gestures. */
  declare target: HTMLElement
  
  // - snip -
  
}

Output that causes a script error:

const __vite_ssr_import_0__ = await __vite_ssr_import__("/modules/util/src/index.ts");

const __vite_ssr_import_1__ = await __vite_ssr_import__("/modules/dom/src/gesture.ts");

const SWIPE_DEFAULT_OPTS = {
  // -snip-
};
class SwipeObserver {
  gesture = null;
  __vite_ssr_import_0__.timeout = null;
  running = false;
  ended = false;
  // - snip -
}

Pretty sure this:

__vite_ssr_import_0__.timeout = null;

is the problem.

Let me know if you need more details than this. I believe this is related to the import name, but if it turns out to be more subtle than this I can get a proper reproduction going.

System Info

System:
    OS: Linux 5.15 Pop!_OS 21.10
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 729.74 MB / 15.05 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 17.2.0 - /tmp/fnm_multishells/598310_1640396620386/bin/node
    npm: 8.1.4 - /tmp/fnm_multishells/598310_1640396620386/bin/npm
  Browsers:
    Firefox: 95.0.1

Used Package Manager

pnpm

Logs

FAIL  modules/dom/tests/observers.ts [ modules/dom/tests/observers.ts ]
SyntaxError: Unexpected token '.'
 ❯ new Script node:vm:100:7
 ❯ createScript node:vm:257:10
 ❯ Object.runInThisContext node:vm:305:10
 ❯ directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9468:19
 ❯ async cachedRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9502:12
 ❯ async modules/dom/src/svelte-adapters.ts:9:31
      7| import { HeldObserver, type WhileHeldOpts } from "./held"
      8| import { HoverObserver, type HoverOpts } from "./hover"
      9| import { KeyObserver, type KeyHandler } from "./key-handling"
       |                               ^
     10| import { SwipeObserver, type SwipeOpts } from "./swipe"
     11| 
 ❯ async directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9473:5
 ❯ async cachedRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9502:12
 ❯ async modules/dom/src/index.ts:3:31
 ❯ async directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9473:5
 FAIL  modules/dom/tests/observers.ts [ modules/dom/tests/observers.ts ]
SyntaxError: Unexpected token '.'
 ❯ new Script node:vm:100:7
 ❯ createScript node:vm:257:10
 ❯ Object.runInThisContext node:vm:305:10
 ❯ directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9468:19
 ❯ async cachedRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9502:12
 ❯ async modules/dom/src/svelte-adapters.ts:9:31
      7| import { HeldObserver, type WhileHeldOpts } from "./held"
      8| import { HoverObserver, type HoverOpts } from "./hover"
      9| import { KeyObserver, type KeyHandler } from "./key-handling"
       |                               ^
     10| import { SwipeObserver, type SwipeOpts } from "./swipe"
     11| 
 ❯ async directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9473:5
 ❯ async cachedRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9502:12
 ❯ async modules/dom/src/index.ts:3:31
 ❯ async directRequest file:/home/monkatraz/Documents/GitHub/wikijump/web/node_modules/.pnpm/[email protected]_12e716a96443584645c3db502ee087fe/node_modules/vitest/dist/worker.js:9473:5

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

[Monkatraz]

Thanks for the quick fix!