search

fwouts / previewjs

Preview UI components in your IDE instantly
https://previewjs.com
Other
1.85k stars 45 forks source link

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

Closed tony19 closed 1 year ago

tony19 commented 1 year ago

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

Screenshot 2023-01-30 at 5 55 24 PM
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](https://previewjs.com/docs/config/wrapper)) modules imported via [aliases](https://previewjs.com/docs/config/aliases) [static assets](https://previewjs.com/docs/config/static-assets) or [SVGR](https://previewjs.com/docs/config/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 commented 1 year ago

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

TheYarin commented 1 year ago

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

fwouts commented 1 year ago

@TheYarin aiming for early next week.

TheYarin commented 1 year ago

🙏

fwouts commented 1 year ago

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