Nothing happens when Preview.js button is clicked

[DerJacques]

Describe the bug

When I click the Preview.js button in VS Code nothing seems to happen and no "Open [Component name] in Preview.js" is shown above the component.

The "output" tab in VS Code for Preview.js also remains empty.

Here's a screenshot:

I tried installing the CLI in the same project which works just fine. I also tried to run the extension in various other projects, but no luck.

When the extension was installed, I saw all its dependencies be installed successfully in the VS Code output pane.

Reproduction

1. Open empty folder and add a .jsx or .tsx component
2. Click the "Open Preview.js" button
3. Nothing happens 🤷

Preview.js version

1.8.0 (I also tried 1.7.0)

System Info

Mac OS X (12.3.1)

VS Code:
Version: 1.67.1 (Universal)
Commit: da15b6fd3ef856477bf6f4fb29ba1b7af717770d
Date: 2022-05-06T12:37:16.526Z
Electron: 17.4.1
Chromium: 98.0.4758.141
Node.js: 16.13.0
V8: 9.8.177.13-electron.0
OS: Darwin arm64 21.4.0

Used Package Manager

npm

Extension logs (useful for crashes)

No mentioning of Preview.js in `Log (Window)` or `Log (Main)`.

In the `Extension Host` you see it started below

[2022-05-13 09:25:29.539] [exthost] [info] Extension host with pid 14229 started
[2022-05-13 09:25:29.539] [exthost] [info] Skipping acquiring lock for /Users/manuel/Library/Application Support/Code/User/workspaceStorage/0852ce39b17ab24e7ee0be05fd2af6a6.
[2022-05-13 09:25:29.674] [exthost] [info] ExtensionService#_doActivateExtension vscode.typescript-language-features, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.680] [exthost] [info] ExtensionService#_doActivateExtension ms-vscode.vscode-typescript-tslint-plugin, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.681] [exthost] [info] ExtensionService#_doActivateExtension sissel.shopify-liquid, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.684] [exthost] [info] ExtensionService#_doActivateExtension VisualStudioExptTeam.vscodeintellicode, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.706] [exthost] [info] ExtensionService#_doActivateExtension wix.vscode-import-cost, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.822] [exthost] [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onLanguage:javascriptreact'
[2022-05-13 09:25:29.829] [exthost] [info] ExtensionService#_doActivateExtension vscode.microsoft-authentication, startup: false, activationEvent: 'onAuthenticationRequest:microsoft'
[2022-05-13 09:25:29.841] [exthost] [info] ExtensionService#_doActivateExtension vscode.debug-auto-launch, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.847] [exthost] [info] ExtensionService#_doActivateExtension vscode.git-base, startup: true, activationEvent: '*', root cause: vscode.git
[2022-05-13 09:25:29.852] [exthost] [info] ExtensionService#_doActivateExtension vscode.ipynb, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.871] [exthost] [info] ExtensionService#_doActivateExtension christian-kohler.path-intellisense, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.901] [exthost] [info] ExtensionService#_doActivateExtension GitHub.vscode-pull-request-github, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.916] [exthost] [info] ExtensionService#_doActivateExtension vscode-icons-team.vscode-icons, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.930] [exthost] [info] ExtensionService#_doActivateExtension vscodevim.vim, startup: true, activationEvent: '*'
[2022-05-13 09:25:29.970] [exthost] [info] ExtensionService#_doActivateExtension vscode.npm, startup: true, activationEvent: 'workspaceContains:package.json'
[2022-05-13 09:25:31.302] [exthost] [info] ExtensionService#_doActivateExtension vscode.git, startup: true, activationEvent: '*'
[2022-05-13 09:25:31.366] [exthost] [info] ExtensionService#_doActivateExtension vscode.github, startup: true, activationEvent: '*'
[2022-05-13 09:25:31.489] [exthost] [info] ExtensionService#_doActivateExtension GraphQL.vscode-graphql, startup: true, activationEvent: 'workspaceContains:**/.graphqlrc,**/.graphqlrc.{json,yaml,yml,js,ts,toml},**/graphql.config.{json,yaml,yml,js,ts,toml},**/package.json'
[2022-05-13 09:25:31.705] [exthost] [info] ExtensionService#_doActivateExtension vscode.github-authentication, startup: false, activationEvent: 'onAuthenticationRequest:github'
[2022-05-13 09:25:33.561] [exthost] [info] Eager extensions activated
[2022-05-13 09:25:33.563] [exthost] [info] ExtensionService#_doActivateExtension vscode.emmet, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.579] [exthost] [info] ExtensionService#_doActivateExtension vscode.merge-conflict, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.582] [exthost] [info] ExtensionService#_doActivateExtension bradlc.vscode-tailwindcss, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.592] [exthost] [info] ExtensionService#_doActivateExtension dbaeumer.vscode-eslint, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.597] [exthost] [info] ExtensionService#_doActivateExtension eamodio.gitlens, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.619] [exthost] [info] ExtensionService#_doActivateExtension esbenp.prettier-vscode, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.646] [exthost] [info] ExtensionService#_doActivateExtension formulahendry.code-runner, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.687] [exthost] [info] ExtensionService#_doActivateExtension GitHub.copilot, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:25:33.762] [exthost] [info] ExtensionService#_doActivateExtension usernamehw.errorlens, startup: false, activationEvent: 'onStartupFinished'
[2022-05-13 09:29:57.073] [exthost] [info] ExtensionService#_doActivateExtension svelte.svelte-vscode, startup: false, activationEvent: 'onLanguage:javascript'
[2022-05-13 09:32:24.026] [exthost] [error] [bradlc.vscode-tailwindcss] provider FAILED
[2022-05-13 09:32:24.028] [exthost] [error] Error: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'uri')
    at Et (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:4:223)
    at Jt (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:3:11206)
    at Immediate.<anonymous> (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:3:11059)
    at processImmediate (node:internal/timers:464:21)
[2022-05-13 09:32:24.058] [exthost] [error] [bradlc.vscode-tailwindcss] provider FAILED
[2022-05-13 09:32:24.058] [exthost] [error] Error: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'uri')
    at Et (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:4:223)
    at Jt (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:3:11206)
    at Immediate.<anonymous> (/Users/manuel/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.3/dist/extension.js:3:11059)
    at processImmediate (node:internal/timers:464:21)
[2022-05-13 09:32:24.493] [exthost] [info] ExtensionService#_doActivateExtension vscode.extension-editing, startup: false, activationEvent: 'onLanguage:markdown'
[2022-05-13 09:32:24.497] [exthost] [info] ExtensionService#_doActivateExtension vscode.markdown-language-features, startup: false, activationEvent: 'onLanguage:markdown'

Preview logs (useful for rendering errors)

Empty

Anything else?

No response

[fwouts]

Hey @DerJacques, thanks for filing this issue!

if the CLI works but the VS Code extension (source) doesn't, that helps narrow it down so thank you :)

I'll look into it!

Would you be able to share what VS Code extensions you use as well? I'm wondering if there could be some bad interaction somewhere.

[DerJacques]

Thanks for the super quick response, @fwouts !

I tried disabling all other extensions just now, but the issue persists. Just to be safe, I also restarted my computer. You never know :D

[fwouts]

Hi @DerJacques, would you be able to try the latest Preview.js version (v1.12.0) and let me know if you're still running into issues?

[DerJacques]

Hi @fwouts

Unfortunately, the issue persists.

I did notice that Preview.js works just fine on some projects on my machine. This leads me to believe it may have problems with our project setup. Does preview.js have any expectations regarding where files are stored, node_modules and other things like that?

Here's a screenshot showing the current state:

[fwouts]

Thank you so much for trying again @DerJacques.

One thing Preview.js doesn't support at the moment is Yarn PnP. It expects a node_modules directory to exist.

It also expects react to be declared as a dependency, devDependency or peerDependency in your package.json.

Would either of these be a problem with your project set-up?

Also if you're able to reproduce that on a project you can share (e.g CRA app), that would be super helpful!

[fwouts]

Would you be able to try the CLI version in your project and see what turns out? You can do this with npx @previewjs/cli. Thank you!

[lalahuang]

I have the same problem

[fwouts]

@lalahuang please provide a little more information to help narrow down the problem, in particular:

• logs from VS Code outputs
• OS and Node versions
• what package manager you use
• which framework (and version) you use

[ghost]

I believe I'm getting this issue as well. Basically, there doesn't seem to be the usual "Open with Preview.js" hint above my components, and additionally, the Preview.js button doesn't open the preview window when clicked.

/Users/kongweiying/.vscode/extensions/zenclabs.previewjs-1.13.0/dist/server.log Preview.js daemon server is already running on port 9315.

MacOS 12.4, Node version v18.8.0. Using Yarn

My package.json { "name": "nextjs", "version": "1.0.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "framer-motion": "5.3.3", "next": "12.0.1", "react": "17.0.2", "react-dom": "17.0.2" }, "devDependencies": { "eslint": "7.32.0", "eslint-config-next": "11.1.0" } }

[fwouts]

Thanks @conwayying! Would you be able to try killing the Node process started by Preview.js (killall node will do 😅) then restarting VS Code and let me know if that fixes it? Obviously that wouldn't be a long-term solution, but it would help narrow down the issue.

[ghost]

That fixes it exactly, cheers Francois!

[lalahuang]

@lalahuang please provide a little more information to help narrow down the problem, in particular:

• logs from VS Code outputs nothing output

• OS and Node versions windows11 node v16.14.0
• what package manager you use pnpm monorepo

• which framework (and version) you use vue3.2.37

[fwouts]

Hi @lalahuang and @DerJacques, would you be able to try Preview.js v1.14? There were a few improvements in that release that might help.

[lalahuang]

Preview.js v1.15.0 is now reporting an error

[fwouts]

Sorry about this @lalahuang, this is fixed in v1.15.1.

[mindnect]

It doesn't seem to work if there are 2 byte characters in the file path.

[fwouts]

@mindnect can you provide an example?

[mindnect]

@fwouts It didn't work when the path contained 2 byte characters(Korean), so I changed it to English and it worked fine. Below is the error message. Actually, It's a common error in countries that use 2 byte characters.😂

Error: Path c:/Users/ryu/Documents/학습/udemy-react/src/index.css is not in cwd c:\Users\ryu\Documents\학습\udemy-react
    at ensureAbsolutePathForCwd (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:55:9)
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:62:55
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:47
    at Array.filter (<anonymous>)
    at module.exports (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:30)
    at async findFiles (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:55:17)
    at async C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1006:44
    at async Previewer.startFromStopped (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1049:5)
    at async Previewer.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:986:9)
    at async Object.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1351:22)
Error: Path c:/Users/ryu/Documents/학습/udemy-react/src/index.css is not in cwd c:\Users\ryu\Documents\학습\udemy-react
    at ensureAbsolutePathForCwd (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:55:9)
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:62:55
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:47
    at Array.filter (<anonymous>)
    at module.exports (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:30)
    at async findFiles (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:55:17)
    at async C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1006:44
    at async Previewer.startFromStopped (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1049:5)
    at async Previewer.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:986:9)
    at async Object.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1351:22)
500 in endpoint [object Object]:
Error: Path c:/Users/ryu/Documents/학습/udemy-react/src/index.css is not in cwd c:\Users\ryu\Documents\학습\udemy-react
    at ensureAbsolutePathForCwd (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:55:9)
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\gitignore.js:62:55
    at C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:47
    at Array.filter (<anonymous>)
    at module.exports (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\[email protected]\node_modules\globby\index.js:135:30)
    at async findFiles (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:55:17)
    at async C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1006:44
    at async Previewer.startFromStopped (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1049:5)
    at async Previewer.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:962:11)
    at async Object.start (C:\Users\ryu\.vscode\extensions\zenclabs.previewjs-1.17.4\dist\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@previewjs\core\dist\index.cjs:1351:22)
✨ Created Preview.js workspace for: c:\Users\ryu\Documents\학습\udemy-react

[fwouts]

@DerJacques I've just tried this with v1.19.2 (which has an updated version of globby, which was crashing in your example) and it seems to work, let me know if you find otherwise :)