crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.78k stars 182 forks source link

Can not see popup page in development mode when popup in subfolder #913

Open mp3por opened 3 weeks ago

mp3por commented 3 weeks ago

Build tool

Vite

Where do you see the problem?

Describe the bug

When I run npm run dev everything compile and a page is opened. However I get this error and a blank page.

If I move the files of the popup in the src directory as on the main branch of this repo everything works.

TypeError: Failed to fetch dynamically imported module: http://localhost:5173/main.tsx?import&t=1724918156329

image

Reproduction

https://github.com/mp3por/vite-plugin-top-level-await-worker-issue/tree/crxjs-bug

Logs

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 381.97 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
    Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 128.1.69.153
    Chrome: 128.0.6613.85
    Safari: 17.6
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.25 => 2.0.0-beta.25
    vite: ^5.4.1 => 5.4.2

Severity

blocking all usage of RPCE

Toumash commented 1 week ago

You have https://github.com/mp3por/vite-plugin-top-level-await-worker-issue/blob/bed6c2a425e0b9501e6a561edc6e9bd5275f53fb/src/pages/popup/index.html#L11C1-L12C1

    <script type="module" src="main.tsx"></script>
  </body>

in your index.html - change it to full path and i will work (like i have in my project <script type="module" src="/src/entrypoints/pages/index.tsx"></script>)

Other thing i discovered was missing

root: '.',

in vite.config.ts