Can't preview Vue components

[bvqbao]

Describe the bug

I don't know why but I can't preview any component in my vue project setup, even a "HelloWorld" component. Not sure if this is a bug or I'm missing something.

Reproduction

1. Go to a SFC file.
2. Click Open <ComponentName> in Preview.js

Preview.js version

v1.5.1

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 5.81 GB / 15.80 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.66.0 - C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
    Visual Studio: 17.1.32228.430 (Visual Studio Community 2022)
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.55)
    Internet Explorer: 11.0.22000.120

Used Package Manager

npm

Extension logs (useful for crashes)

[2022-04-01 18:04:44.945] [exthost] [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onLanguage:javascript'

Preview logs (useful for rendering errors)

No response

Anything else?

vite.config.js.txt package.json.txt

[fwouts]

Thanks a ton for filing this issue @bvqbao!

It looks like the iframe where the preview is meant to appear is somehow broken for you.

Do you see any error in the webview logs? (Ctrl+P then Developer: Open Webview Developer Tools)

[bvqbao]

Here is the log file in question vscode-app-1648814785758.log

Some warnings:

30 |      const { update } = await import(
31 |        /* @vite-ignore */
32 |        `/preview${componentLoaderModuleId}`
   |        ^
33 |      );
34 |      await updateComponent(update);
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

And a message about iframe as you said:

Using standard dev tools to debug iframe based webview

[fwouts]

Awesome I think this will help narrow it down, thanks so much!

[bvqbao]

Ok. This is a weird bug.

1. Create a new vue project with npm init vue@3 I can preview components in this new project:

2. Copy the src folder (attached) from my actual project to this new project. The previews still work:

3. Copy the dependencies section in package.json from my actual project to the new project. And the previews stop working:

Sometime, I just open the package.json file and the previews stop working (don't need to copy the dependencies section). Other times, the previews work after step 3 for awhile and then suddenly stop working.

Attachments: src.zip

[fwouts]

Thanks, this is really helpful.

Just to double check, did you run npm install or yarn install after updating package.json?

[bvqbao]

yes. I did run npm install before previewing.

[fwouts]

OK, that's unfortunate as it was the only way I could reproduce it!

I plan to release a CLI version of Preview.js in the next few weeks, which should hopefully make this easier to debug. Let's reconvene then :)

[fwouts]

Hi @bvqbao, I've released a CLI version of Preview.js, would you mind trying it on your project to see whether it works in that context? See https://previewjs.com/docs/platforms/cli for more details!

[fwouts]

Closing this issue as no further information was provided in the last year.