previewjs
previewjs copied to clipboard
fwouts
"previewjs modules could not be loaded."
Describe the bug
Hi there,
After installing the VSCode extension, whenever I click on the P icon I get the following error notification on VSCode:
This is the text I see in the Preview.js output panel:
Please wait while Preview.js installs dependencies. This could take a minute.
$ npm install
up to date, audited 373 packages in 2s
46 packages are looking for funding run
npm fundfor detailsfound 0 vulnerabilities
Oh no, it looks like installation failed!
Error: npm install succeeded but @previewjs modules could not be loaded.
I appreciate any help, thank you.
Reproduction
- Install VSCode extension through the Visual Studio Marketplace.
- Click the "P" icon that now appears on every file editor pane to open Preview.js (Ctrl+K V).
- See error notification from VSCode in the bottom right corner.
Preview.js version
v1.8.0
Framework
React 18.1.0
System Info
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
Memory: 969.76 MB / 15.70 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
VSCode: 1.67.2 - C:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
Internet Explorer: 11.0.19041.1566
Used Package Manager
npm
Extension logs (useful for crashes)
Log (Window)
[2022-06-01 18:18:56.755] [renderer1] [error] [Extension Host] Unable to load @previewjs/core from c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies Error: Cannot find module 'c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\finalhandler\node_modules\debug\src\index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (node:internal/modules/cjs/loader:360:19)
at Function.Module._findPath (node:internal/modules/cjs/loader:573:18)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:973:27)
at Module._load (node:internal/modules/cjs/loader:832:27)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at Object.<anonymous> (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\finalhandler\index.js:14:13)
at Module.u._compile (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
at Module.load (node:internal/modules/cjs/loader:1035:32)
at Module._load (node:internal/modules/cjs/loader:876:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at Object.<anonymous> (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\express\lib\application.js:16:20)
at Module.u._compile (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
at Module.load (node:internal/modules/cjs/loader:1035:32)
at Module._load (node:internal/modules/cjs/loader:876:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at Object.<anonymous> (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\express\lib\express.js:18:13)
at Module.u._compile (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
at Module.load (node:internal/modules/cjs/loader:1035:32)
at Module._load (node:internal/modules/cjs/loader:876:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at Object.<anonymous> (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\express\index.js:11:18)
at Module.u._compile (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
at Module.load (node:internal/modules/cjs/loader:1035:32)
at Module._load (node:internal/modules/cjs/loader:876:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at Object.<anonymous> (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies\node_modules\@previewjs\core\dist\src\index.js:10:35)
at Module.u._compile (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
at Module.load (node:internal/modules/cjs/loader:1035:32)
at Module._load (node:internal/modules/cjs/loader:876:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Function.s._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:32307)
at Function.E._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:102:28750)
at Function._._load (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:61719)
at Module.require (node:internal/modules/cjs/loader:1059:19)
at h (c:\Users\tiago\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
at requireModule (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dist\index.js:4558:18)
at loadModules (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dist\index.js:4547:20)
at install2 (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dist\index.js:11924:37)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async initializePreviewJs (c:\Users\tiago\.vscode\extensions\zenclabs.previewjs-1.8.0\dist\index.js:12252:7)
Preview logs (useful for rendering errors)
No response
Repo link (if available)
No response
Anything else?
No response
Hi @tiagofs, thanks for filing the issue.
I noticed you didn't attach any logs, would you be able to check VS Code's window and shared logs and see if there's any error related to Preview.js?
Hi @fwouts , thanks for taking a look at this issue. I just updated the original post with VS Code's "Log (Window)". On "Log (Shared)" there's no mention of Preview.js or errors in any other extensions.
Thanks, that's super helpful.
What happens if you go to c:\Users\tiago.vscode\extensions\zenclabs.previewjs-1.8.0\dependencies, remove node_modules, run npm install then restart VS Code?
similar problem here in VSCode
I disable most extensions right after install and enable them for workspaces only (i.e. there is no need for this in a PHP or Vanilla JS project)
Restarted Code and found these in the output console. The extension was disabled despite being enabled for the workspace.
Restarted Code again. Now (re-)enabled extension globally, 'cos there no longer was a "workspace only" option (sad).
It appears to run (the preview panel opens up and I see those massive animated dots) but doesn't work with my Vue3 component. I'll post a separate issue 'cos I also have issues with this using my Vite configuration/setup.
Preview.js
Please wait while Preview.js installs dependencies. This could take a minute.
$ npm install
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
added 340 packages, changed 2 packages, and audited 343 packages in 8s
32 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Oh no, it looks like installation failed!
Error: npm install succeeded but @previewjs modules could not be loaded.
## Log (Main)
[2022-06-21 11:33:02.145] [renderer1] [error] [Extension Host] Unable to load @previewjs/core from c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dependencies Error: Cannot find module '@previewjs/core'
Require stack:
- c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dist\index.js
- d:\Utilities\VSCode\resources\app\out\vs\loader.js
- d:\Utilities\VSCode\resources\app\out\bootstrap-amd.js
- d:\Utilities\VSCode\resources\app\out\bootstrap-fork.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
at Function._.resolve (d:\Utilities\VSCode\resources\app\out\vs\loader.js:4:761)
at requireModule (c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dist\index.js:4558:34)
at loadModules (c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dist\index.js:4547:20)
at install2 (c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dist\index.js:11392:37)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async initializePreviewJs (c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0\dist\index.js:11720:7)
Log (Extension Host)
[2022-06-21 11:32:52.304] [exthost] [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onStartupFinished'
Log (Shared)
It's intersting to see a timestamp mismatch of 2.5 hours 11:32:52 vs 08:53:26
[2022-06-21 08:53:26.710] [sharedprocess] [info] Getting Manifest... zenclabs.previewjs
[2022-06-21 08:53:26.715] [sharedprocess] [info] Installing extension: zenclabs.previewjs
[2022-06-21 08:53:28.044] [sharedprocess] [info] Downloaded extension: zenclabs.previewjs c:\Users\MyUsername\AppData\Roaming\Code\CachedExtensionVSIXs\zenclabs.previewjs-1.9.0
[2022-06-21 08:53:28.075] [sharedprocess] [info] Extracted extension to c:\Users\MyUsername\.vscode\extensions\.7e4f5aa7-7418-4f7d-8107-b70e9600a02b: zenclabs.previewjs
[2022-06-21 08:53:28.094] [sharedprocess] [info] Renamed to c:\Users\MyUsername\.vscode\extensions\zenclabs.previewjs-1.9.0
[2022-06-21 08:53:28.110] [sharedprocess] [info] Extracting completed. zenclabs.previewjs
[2022-06-21 08:53:28.111] [sharedprocess] [info] Extension installed successfully: zenclabs.previewjs
[2022-06-21 08:54:10.140] [sharedprocess] [info] Worker process with pid 9120 terminated normally (type: fileWatcher, window: 4).
[2022-06-21 08:54:11.114] [sharedprocess] [info] Starting worker process with pid 31396 (type: fileWatcher, window: 4).
[2022-06-21 08:54:12.211] [sharedprocess] [info] Worker process with pid 31396 terminated normally (type: fileWatcher, window: 4).
[2022-06-21 08:54:16.585] [sharedprocess] [info] Worker process with pid 23356 terminated normally (type: fileWatcher, window: 1).
[2022-06-21 08:54:18.260] [sharedprocess] [info] Starting worker process with pid 31616 (type: fileWatcher, window: 1).
Thank you for the additional report @WebMechanic!
One thing I notice is that both of you use Windows, and I also notice the lowercase path c:\... when I'd assume it should have been C:\ (although I haven't used Windows for 10+ years so I might be confused).
I wonder if by any chance your filesystem is configured to be case-sensitive? That'd help narrow it down :)
@fwouts nope. even with NTFS it's case insensitive and afaik drive letters work either way even in bash, i.e. cd /c/Users and cd /C/Users works the same, however paths and files in bash are indeed case sensitive. I wouldn't even know how to enable case sensitivity for NTFS, if it's possible at all :D
Node's fs or path should handle Windows paths transparently unless there's some bad case sensitive string comparison or regexes involved after that.
I forgot to mention that the real "MyUsername" is in fact having diacrytics in it - unintenionally -, think of it like "MyÚsêrnämé" ... Basic regex can't handle these characters, despite JS internal unicode support, Plain \w doesn't recognize these characters and you need \p{L} & Co. and the u flag to get a match.
I believe other tools incl. PhpStorm have also issues resolving that path and finding their stuff in the %HOME% directory.
Either way I couldn't get the extension to wotk, not in Code, not in PhpStorm. It eventually shows up, but just shows these dots.
@fwouts nope. even with NTFS it's case insensitive and afaik drive letters work either way even in bash, i.e.
cd /c/Usersandcd /C/Usersworks the same, however paths and files in bash are indeed case sensitive. I wouldn't even know how to enable case sensitivity for NTFS, if it's possible at all :D Node'sfsorpathshould handle Windows paths transparently unless there's some bad case sensitive string comparison or regexes involved after that. I forgot to mention that the real "MyUsername" is in fact having diacrytics in it - unintenionally -, think of it like "MyÚsêrnämé" ... Basic regex can't handle these characters, despite JS internal unicode support, Plain\wdoesn't recognize these characters and you need\p{L}& Co. and theuflag to get a match. I believe other tools incl. PhpStorm have also issues resolving that path and finding their stuff in the %HOME% directory.Either way I couldn't get the extension to wotk, not in Code, not in PhpStorm. It eventually shows up, but just shows these dots.
Thank you for all the additional info. Would you be able to try the CLI as well? See https://previewjs.com/docs/platforms/cli
I'll see if I can setup a new Vite project and give it a try. Might take a few day untilI get to it.
I was reluctant to do earlier when I saw it's installing a whopping 340 packages incl. FontAwsome and - pardon my French - similar cruft just for the IFrame, only to display a handful of icons - at least according to "view source". That's way over the top and "too generous" for my taste to be frank, and I'd never install this in an active project for that very reason and no matter how useful it could be. I'm sorta "ok" with it as a "singleton" extension instance in the IDE, but otherwise ... Vite's HMR is serving me well and creating a quick wrapper app to preview a component isn't that much of a deal.
Since v1.12.0 (released today), Preview.js bundles its dependencies so there is no need for an npm install step anymore. This error shouldn't be possible anymore.
Feel free to reopen if you still see it happening somehow :)