No compatible plugin found for workspace with root

[developermau]

Describe the bug

Hi everyone!
I have a React + Typescript app created by Vite. Then I created a button component and wanted to see a button preview using Preview.js but I had an error: No compatible plugin found for workspace with root.

Reproduction

1. Create an app with Vite:

npm create vite@latest
-> Project Name: previewjs-example
-> Select a framework: React
->  Select a variant: Typescript

2. Install NPM Dependencies

cd previewjs-example
npm install

3. Open the app on VSCode

code .

4. Create a button component src/AppButton.tsx

import { MouseEventHandler } from "react";

type AppButtonProps = {
  children: React.ReactNode;
  variant?: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
};

export const AppButton = ({
  children,
  variant = "",
  onClick,
}: AppButtonProps) => {
  const classWithVariant = variant ? `button button--${variant}` : "button";

  return (
    <button className={classWithVariant} onClick={onClick}>
      {children}
    </button>
  );
};

5. Try to use Preview.js

• On my VSCode editor didn't appear the Open AppButton in Preview.js

• Reset preview.js

[01:31:52.255] WARN (5236): No compatible plugin found for workspace with root: c:\Users\mauri\.vscode\extensions\zenclabs.previewjs-1.24.4\dist
Error: connect ECONNREFUSED 127.0.0.1:9315
	at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
Preview.js daemon could not be started.

Also, I tried to stop and start but it didn't work.

Optional 1. Refactor src/App.tsx

import { AppButton } from "./AppButton"

function App() {
  const onGreeting = () => {
    console.log("Hello world!...");
  };

  return (
    <>
      <AppButton variant="create-a-list" onClick={onGreeting}>
        Greeting
      </AppButton>
    </>
  )
}

export default App

Optional 2. Run development server

npm run dev

Preview.js version

v1.24.4

Framework

React 18.2.0

System Info

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-2630QM CPU @ 2.00GHz
  Memory: 946.38 MB / 5.91 GB
Binaries:
  Node: 20.6.1 - C:\Program Files\nodejs\node.EXE
  npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
  Android Studio: AI-222.4459.24.2221.9862592
  VSCode: 1.82.1 - C:\Users\mauri\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Visual Studio: 17.5.33530.505 (Visual Studio Community 2022)
Browsers:
  Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.81)
  Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Extension logs (useful for crashes)

2023-09-14 01:30:41.194 [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onLanguage:typescriptreact'

Preview logs (useful for rendering errors)

No response

Repo link (if available)

No response

Anything else?

Preview.js is not working on my VSCode.

Google Chrome without console errors.

[fwouts]

Thank you for reporting this @developermau.

I cannot reproduce on a Mac, so I'm guessing this is a Windows-specific issue. I'll try to fix it once I get a VM going :)

[developermau]

No problem, I understand 👍 .
It's amazing. Thank you so much!
I'll stay tuned 😃 .

[fwouts]

In the meantime, try downgrading to v1.22.2, it might fix your problem!

[developermau]

Thank you so much for your support!
I've installed v1.22.2 but Preview.js still not working.

Logs

2023-09-14 21:57:14.819 [info] ExtensionService#_doActivateExtension zenclabs.previewjs, startup: false, activationEvent: 'onLanguage:typescriptreact'

v20.6.1
✅ Detected compatible NodeJS version
🚀 Starting Preview.js daemon...
Streaming daemon logs to: c:\Users\mauri\.vscode\extensions\zenclabs.previewjs-1.22.2\dist\daemon.log
[ready] Preview.js daemon server is now running at http://localhost:9315

[fwouts]

Hey @developermau, I got a Windows VM running but haven't yet been able to reproduce. I did find one or two funky things on Windows where the Preview.js process doesn't seem to be restarting properly when you reopen VS Code, it might be linked to that.

Just curious if rebooting your computer helps?

[developermau]

Thank you so much for your help, it worked!

1. Rebooted my computer
2. Uninstalled and reinstalled the Preview.js (1.22.2) again
3. Reset Preview.js after clearing the cache
4. Closed my VSCode editor
5. I waited some seconds for the Preview.js dependencies installation
6. Clicked on "Open App in Preview.js"

[fwouts]

@developermau does the latest version work as well now?

[developermau]

I've updated to the 1.24.4 version (or the latest version) and it didn't work. Also, I tried rebooting my computer and exchanging between 1.22.2 and 1.24.4, but unfortunately not work either (only with 1.22.2 worked).