Acorn: SyntaxError: Identifier 'RefreshRuntime' has already been declared

[tony19]

Describe the bug

Preview.js cannot render basic React component in newly scaffolded Vite React TypeScript + SWC project. It works fine for the normal Vite React TypeScript template (without SWC).

Logs

Unable to render HelloWorld While Preview.js can work out of the box for simple components, you may need a custom configuration to render components that depend on:

a specific state or context (see Wrapping components)
modules imported via aliases
static assets or SVGR
Please see the logs below:

[5:49:58 PM] Unable to parse /Users/atrinh5/src/tmp/vite-tmp/src/components/HelloWorld.tsx with Acorn: SyntaxError: Identifier 'RefreshRuntime' has already been declared (10:7)

at findTopLevelEntityNames (/Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/@previewjs+core@15.1.2_@types+node@18.11.18/node_modules/@previewjs/core/dist/index.cjs:370:11)
at TransformContext.transform (/Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/@previewjs+core@15.1.2_@types+node@18.11.18/node_modules/@previewjs/core/dist/index.cjs:354:35)
at Object.transform (file:///Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/vite@4.0.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:44)
at async loadAndTransform (file:///Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/vite@4.0.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

[5:49:58 PM] TypeError: Failed to fetch dynamically imported module: http://localhost:3141/preview/src/components/HelloWorld.tsx

Reproduction

1. Scaffold a Vite project with npm init vite@latest. Pick React and TypeScript + SWC.
2. Create src/components/HelloWorld.tsx with sample code:

export const HelloWorld = () => {
  return <h1>Hello world</h1>
}

3. In VS Code, click Open HelloWorld in Preview.js (shown above component name in HelloWorld.tsx).
4. Observe the error seen in screenshot.

Preview.js version

v1.17.3

Framework

React 18.2.0

System Info

*command hung on my laptop*

* macOS Ventura
* M1 MAX
* Chrome Version 109.0.5414.87 (Official Build) (arm64) 
* VS Code 1.71.2

Used Package Manager

npm

Extension logs (useful for crashes)

[2023-01-30 17:43:30.122] [exthost] [info] Extension host with pid 18292 started
[2023-01-30 17:43:30.122] [exthost] [info] Skipping acquiring lock for /Users/atrinh5/Library/Application Support/Code/User/workspaceStorage/e08fa41c59503b9df67a6952317b0c27.
[2023-01-30 17:43:30.150] [exthost] [info] ExtensionService#_doActivateExtension vscode.microsoft-authentication, startup: false, activationEvent: 'onAuthenticationRequest:microsoft'
[2023-01-30 17:43:30.161] [exthost] [info] ExtensionService#_doActivateExtension vscode.debug-auto-launch, startup: true, activationEvent: '*'
[2023-01-30 17:43:30.164] [exthost] [info] ExtensionService#_doActivateExtension vscode.git-base, startup: true, activationEvent: '*', root cause: vscode.git
[2023-01-30 17:43:30.168] [exthost] [info] ExtensionService#_doActivateExtension vscode.ipynb, startup: true, activationEvent: '*'
[2023-01-30 17:43:30.170] [exthost] [info] ExtensionService#_doActivateExtension redhat.vscode-yaml, startup: true, activationEvent: '*', root cause: 42Crunch.vscode-openapi
[2023-01-30 17:43:30.191] [exthost] [info] ExtensionService#_doActivateExtension vscode.npm, startup: true, activationEvent: 'workspaceContains:package.json'
[2023-01-30 17:43:30.203] [exthost] [info] ExtensionService#_doActivateExtension antfu.iconify, startup: true, activationEvent: 'workspaceContains:package.json'
[2023-01-30 17:43:30.439] [exthost] [warning] [redhat.vscode-yaml] Accessing a resource scoped configuration without providing a resource is not expected. To get the effective value for '[yaml]', provide the URI of a resource or 'null' for any resource.
[2023-01-30 17:43:30.440] [exthost] [warning] [redhat.vscode-yaml] Accessing a resource scoped configuration without providing a resource is not expected. To get the effective value for '[yaml]', provide the URI of a resource or 'null' for any resource.
[2023-01-30 17:43:30.701] [exthost] [info] ExtensionService#_doActivateExtension vscode.git, startup: true, activationEvent: '*'
[2023-01-30 17:43:30.713] [exthost] [info] ExtensionService#_doActivateExtension vscode.github, startup: true, activationEvent: '*'
[2023-01-30 17:43:30.717] [exthost] [info] ExtensionService#_doActivateExtension 42Crunch.vscode-openapi, startup: true, activationEvent: '*'
[2023-01-30 17:43:31.045] [exthost] [info] ExtensionService#_doActivateExtension hilleer.yaml-plus-json, startup: true, activationEvent: 'workspaceContains:**/**.json,**/**.yml,**/**.yaml'
[2023-01-30 17:43:31.075] [exthost] [info] ExtensionService#_doActivateExtension vscode.github-authentication, startup: false, activationEvent: 'onAuthenticationRequest:github'
[2023-01-30 17:43:31.107] [exthost] [info] Eager extensions activated
[2023-01-30 17:43:31.112] [exthost] [info] ExtensionService#_doActivateExtension vscode.emmet, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.116] [exthost] [info] ExtensionService#_doActivateExtension vscode.merge-conflict, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.117] [exthost] [info] ExtensionService#_doActivateExtension bradlc.vscode-tailwindcss, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.125] [exthost] [info] ExtensionService#_doActivateExtension dbaeumer.vscode-eslint, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.143] [exthost] [info] ExtensionService#_doActivateExtension eamodio.gitlens, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.160] [exthost] [info] ExtensionService#_doActivateExtension esbenp.prettier-vscode, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.178] [exthost] [info] ExtensionService#_doActivateExtension usernamehw.errorlens, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:31.180] [exthost] [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onStartupFinished'
[2023-01-30 17:43:37.453] [exthost] [info] ExtensionService#_doActivateExtension vscode.typescript-language-features, startup: false, activationEvent: 'onLanguage:typescriptreact'
[2023-01-30 17:43:37.469] [exthost] [info] ExtensionService#_doActivateExtension Orta.vscode-twoslash-queries, startup: false, activationEvent: 'onLanguage:typescriptreact'
[2023-01-30 17:43:37.491] [exthost] [info] ExtensionService#_doActivateExtension unifiedjs.vscode-mdx, startup: false, activationEvent: 'onLanguage:typescriptreact'
[2023-01-30 17:43:37.504] [exthost] [info] ExtensionService#_doActivateExtension Vue.volar, startup: false, activationEvent: 'onLanguage:typescriptreact'
[2023-01-30 17:58:55.273] [exthost] [info] ExtensionService#_doActivateExtension vscode.configuration-editing, startup: false, activationEvent: 'onLanguage:json'
[2023-01-30 17:58:55.293] [exthost] [info] ExtensionService#_doActivateExtension vscode.extension-editing, startup: false, activationEvent: 'onLanguage:json'
[2023-01-30 17:58:55.306] [exthost] [info] ExtensionService#_doActivateExtension vscode.json-language-features, startup: false, activationEvent: 'onLanguage:json'

Preview logs (useful for rendering errors)

logs.ts:9 [vite] Internal Server Error
Unable to parse /Users/atrinh5/src/tmp/vite-tmp/src/components/HelloWorld.tsx with Acorn: SyntaxError: Identifier 'RefreshRuntime' has already been declared (10:7)
    at findTopLevelEntityNames (/Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/@previewjs+core@15.1.2_@types+node@18.11.18/node_modules/@previewjs/core/dist/index.cjs:370:11)
    at TransformContext.transform (/Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/@previewjs+core@15.1.2_@types+node@18.11.18/node_modules/@previewjs/core/dist/index.cjs:354:35)
    at Object.transform (file:///Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/vite@4.0.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:44)
    at async loadAndTransform (file:///Users/atrinh5/.vscode/extensions/zenclabs.previewjs-1.17.3/dist/node_modules/.pnpm/vite@4.0.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)
(anonymous) @ logs.ts:9
18:00:21.586 logs.ts:9 TypeError: Failed to fetch dynamically imported module: http://localhost:3141/preview/src/components/HelloWorld.tsx

Repo link (if available)

https://github.com/tony19-sandbox/vite-ts-react-swc

Anything else?

No response

[fwouts]

Hey @tony19, sorry about the radio silence. Fix coming soon :)

[TheYarin]

Any estimate when will the new version be released to the marketplace?

[fwouts]

@TheYarin aiming for early next week.

[TheYarin]

🙏

[fwouts]

v1.17.4 was just pushed to VS Code Marketplace, should be live within an hour or two.