plasmo: [BUG] Development server usually doesn't update the extension or being extremely slow

I’m experiencing this as well. To reliably have changes show up in a content script in Chrome, I have to save a file, add a space to the file, save it again, then the page refreshes a second time and has my updated content. I’m on v0.84.1

Is work still ongoing on this? Massive issue for me - I can only see my changes if I either: A) delete the build folder every change B) “empty” save package.json with no actual changes to trigger “package.json changed, updating manifest overides. You might need to restart the dev server”. This is annoying to do, because it crashes the extension window every time and I have to open a new tab to keep developing the extension page.

Other things I tried: running with pnpm run dev, using the lab experimental mode (made things worse & threw a bunch of other errors).

I’m building a 1-page extension with barely any dependencies, pure Plasmo & tailwind, I just started development yesterday and have very few components.

Love Plasmo, this should probably be #1 priority bug to fix.

Edit:

I suspect it could also be something to do with incorrectly named file imports. I was importing a file called tasks.tsx into my newtab/index.tsx file, but I was importing it as import Tasks from "./Tasks" with a capital T. This doesn’t throw console errors at build time but when I changed to import Tasks from "./tasks auto-reload/HMR started working again.

Hello folks 👋 Sorry giving late response, I just wanted to experiment and see if the issues will continue after changing the browser. Luckily most of my issues are resolved by changing the browser to chrome from brave which both browsers only used in clean state without any profiles/extensions/history etc. As I know both of them are using the same architecture but under the hood things are different I suppose.

There is weird bug occurring from time to time and just because I forgot –verbose flag most of the time. It’s hard to understand without being able to reproduce it, but I will try my best to remember –verbose. So the bug happens in this way If I am doing bunch of different changes in my source files and save multiple times after certain period, there is a mismatch happening in saved state and extension. If I explain it by giving an example:

--- 15 hours of work 🤯---

<p>Tired emoji</p>
// Save the file
// Hot reload happens
// Tired emoji doesn't show up 😥


// To verify what's wrong change source code to
<p>Confused emoji</p>
// Magically "Tired emoji" shows up but it's 1 state before 🤷🏻‍♂️

I’ve been meaning to raise a similar issue - there are two problems noted here that I’m also having 1) the slowness and 2) the fact that the new code is often not successfully loaded after changes. (@suchcodemuchwow, if it helps, you may not need to restart the server; I find it works to save the file to trigger an additional compilation then reload the extension manually in Chrome.)

(2) has gotten much more frequent as my extension has gotten bigger and recompilation slower. I think it is actually composed of two sub-issues: (2a) is that when the cli reports ‘Extension repackaged’ it does not always have the latest version of the file I’m working on. After it has repackaged once I need to save the file again to catch the latest change. (2b) is that after I have done this the extension is not always reloaded in Chrome so Chrome doesn’t have the latest code.

To give you an idea it currently takes me 40-50secs to start the dev server. The extension is fairly small (--verbose reports 117 files which includes 4 content scripts). Repackaging is usually around 3-5 secs. However, if there was an error like invalid JSX this goes up to 20-30 secs. It’s hard to compare complexity with my Next.js site but that takes 1-2 secs and has more frontend components and overall files. Would be great to improve the speed, but I’m more bothered by the failure to reload since it means I am compiling twice and constantly manually reloading and refreshing.

It might be beneficial to reduce the complexity of each CSUI

Would you be able to elaborate on that? Do you mean if we split one CSUI into two we’ll see faster compilation?

CLARIFICATION: the Next.js site is 1-2secs for the dev server to start, 20-25secs for static export (next build). That’s doing a prod build though.

Also one aspect to think about (we should add a best-practice section somewhere in the docs maybe), is that it might be beneficial to reduce the complexity of each CSUI. Unlike web app where the dev server can deliver small piece for the browser to evaluate, extension must include everything in its bundle.

couldn’t figure out why it is so much slower than NextJS

Can you make a bench between plasmo’s bundling and NextJS’s static export with similar complexity to see if there’s a huge diff? Plasmo is based on Parcel which uses SWC, so it’s the same compiler as Next.

The key diff we would find IMO, is that NextJS can leverage more server-side resource to deliver the output so it doesn’t have to bundle everything, whereas for extension, Plasmo has to create a static bundle for the browser to load. So there’s more stuffs being resolved and added into the final bundle compared to a SSR web app.

@suchcodemuchwow can you run dev with --verbose log together with the generated manifest.json file in the dev directory. These would be helpful in pinpointing down where we should look.