Issues with React

[aklinker1]

Summary

As an alternative, you can try out WXT. It's an opinionated framework for developing web extensions that I've been working on for a while. I have verified that React doesn't have the same issues in WXT.

https://wxt.dev/

If a component isn't exported as default, the extension won't run in dev mode correctly. It will either log error messages, or HMR/fast reload will silently fail. See https://github.com/aklinker1/vite-plugin-web-extension/issues/136#issuecomment-1685371260 for current behavior.

This means developing large react application will be difficult, if not impossible, to write using this plugin.

This works

export default function () {
  return <div />
}

These don't

export const App = () => {
  return <div />
}

const App = () => {
  return <div />
}
export { App }

const App = () => {
  return <div />
}
export default App

Also see:

• 136

• 117

• 84

• 114

• 175

Reproduction

See #136 for an example reproduction.

[FarazFKhan]

Could someone please explain the difference between the "vite-plugin-web-extension" and the "wxt" web extension frameworks?

[aklinker1]

@FarazFKhan There's a TLDR at the bottom.

The main difference is that vite-plugin-web-extension is a vite plugin that operates with Vite's limited plugin lifecycle, whereas WXT is a framework build on top of Vite with additional functionality outside the build process.

Web extensions, with their multiple build steps (one per entrypoint), need to schedule multiple Vite builds to output a fully functioning extension. Making major modifications like this to the build process from inside a plugin is difficult to do and easily breaks with non-breaking Vite changes.

vite-plugin-web-extension orchestrates all the required builds for a web extension by blocking the "main" build until all these "child" builds are completed.

vite build (no vite-plugin-web-extension)
└─ vite

vite build (with vite-plugin-web-extension)
└─ vite (main)
   ├─ vite (popup, options, other html pages...)
   ├─ vite (sandbox pages...)
   ├─ vite (background)
   ├─ vite (content script 1)
   ├─ vite (content script 2)
   └─ vite (content script ...)

When you consider dev mode and the dev server, things get more complicated. Different lifecycle events fire during dev mode, meaning we need to orchestrate the builds in a completely separate code path, but with the same lifecycle restrictions.

Ideally, when building a web extension, we need to be able to work outside the Vite's "existing build process", and plugins don't allow us to do that.

Ok, so what about WXT? WXT is a framework that uses Vite as a build tool internally.

The build process WXT uses is similar to Vite, but simpler:

wxt build
├─ vite (popup, options, other html pages...)
├─ vite (sandbox pages...)
├─ vite (background)
├─ vite (content script 1)
├─ vite (content script 2)
└─ vite (content script ...)

Since WXT controls vite, it can eliminate the "main" vite build (normally started when running vite build), which restricts when we can run code. It lets us leverage new parts of the build cycle, like before and after all builds. Plugin's don't have hooks for this.

TLDR

I made WXT to address the limitations of a Vite plugin. In addition to orchestrating the build process, it comes with additional features. WXT includes auto-imports, zipping and publishing utils, improved typing to the browser object, simpler inline configuration, and more. That is what makes WXT a framework, while this plugin is not.

WXT is meant to replace this plugin within the next year or so.