Not compatible with shadcn/ui?

HotariTobu commented 5 months ago

Summary

I created a project with the plugin's template. After I added tailwindcss and shadcn/ui, the popup component made not to be rendered.

How can I use both the plugin and shadcn/ui?

Reproduction

https://github.com/HotariTobu/vite-web-ext-shadcn

To be exact, the error occurs when tsx including a shadcn/ui component. The problem doesn't happen if we don't use a component by doing comment-out etc like below;

src\pages\Popup.tsx#12

      {/* <Button>BUTTON</Button> */}

Environment

Terminal log 👇

$ yarn dev
yarn run v1.22.19
$ vite

Build Steps
  1. Building src/popup.html indvidually
  2. Building src/background.ts indvidually

  VITE v5.0.12  ready in 568 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Building src/popup.html (1/2)
vite v5.0.12 building for development...
✓ 5 modules transformed.
23:01:15 [vite] page reload dist/src/popup.html
23:01:15 [vite] page reload dist/src/popup.html (x2)
dist/src/popup.html  0.57 kB │ gzip: 0.33 kB
dist/src/popup.js    2.25 kB │ gzip: 1.05 kB
✓ built in 402ms

Building src/background.ts (2/2)
vite v5.0.12 building for development...

watching for file changes...

build started...
✓ 4 modules transformed.
dist/src/background.js  10.01 kB │ gzip: 2.98 kB
built in 162ms.

✓ Wrote manifest.json

Opening browser...
Done!

Console log 👇

Uncaught Error: React refresh runtime was loaded twice. Maybe you forgot the base path?
    at refresh-runtime.js?v=668d75ce:368:9

HotariTobu commented 4 months ago

It seems any external file components cause.

WonderPanda commented 4 months ago

Also seeing this error when trying to get setup using ShadCN + Tailwind inside of an NX monorepo.

As soon as I try and render a component I get the React Refresh runtime was loaded twice error

HotariTobu commented 4 months ago

I avoid the issue by using @vitejs/plugin-react instead of @vitejs/plugin-react-swc. However, I want to use swc version if possible.

andrewbellucci commented 1 month ago

@vitejs/plugin-react is a quick workaround you can use as a drop in replacement, but @HotariTobu is right. Maybe swap the default to @vitejs/plugin-react until this problem is addressed @aklinker1

aklinker1 / vite-plugin-web-extension