Cannot access browser in development environment when using '@vitejs/plugin-vue' (without module-vue)

[aiktb]

The code on the left will get Uncaught ReferenceError: browser is not defined when accessing browser in development mode, but everything works fine in production. Manually importing browser will not give this error.

The code on the right does not have any exceptions. What is the difference between these two codes?

Left:

import { defineConfig } from "wxt";
import vue from "@vitejs/plugin-vue";

// See https://wxt.dev/api/config.html
export default defineConfig({
  vite: () => ({
    plugins: [vue()],
  }),
});

Right:

import { addViteConfig, defineWxtModule } from "wxt/modules";
import vue from "@vitejs/plugin-vue";

export default defineWxtModule({
  setup(wxt) {
    addViteConfig(wxt, () => ({
      plugins: [vue()],
    }));
  },
});

I would like to know the correct way to implement @vitejs/plugin-vue in WXT.

[aklinker1]

Hmm, there shouldn't be a difference. Can you share the full project?

[aklinker1]

Could not figure out why unimport was adding the import outside the script block... So I've opened an issue over there: unjs/unimport#419

Hopefully someone can tell me what I'm doing wrong lol

[aiktb]

Could not figure out why unimport was adding the import outside the script block... So I've opened an issue over there: unjs/unimport#419

Hopefully someone can tell me what I'm doing wrong lol

The same error occurs when using #import on [email protected], but there is no error with wxt/browser. Should I not use #import?

[aiktb]

One more thing to add, all the errors only appear in Vue files. TS files can be correctly using browser auto import, and can also use virtual module.

[aiktb]

I found that not only the browser auto-import is invalid, but all the auto-import in the Vue file are invalid.
When I use presets: ["vue"], I can see that the type has been generated, but the error ref is not defined is reported. When I use the following code, everything works fine, so I think it is most likely an error in WXT's integration with Vite.

//Error 
// export default defineConfig({
//   imports: {
//     imports: [{ name: "ref", from: "vue" }],
//   },
//   vite: () => ({
//     plugins: [vue()],
//   }),
// });



export default defineConfig({
  imports: false,
  vite: () => ({
    plugins: [
      vue(),
      Unimport.vite({
        imports: [{ name: "ref", from: "vue" }],
      }),
    ],
  }),
});

Additional information:
I tried downgrading wxt to 0.19.16 and overwriting the vite version to 5.4.14, and the error still exists.

Let's go back to the question at the beginning. What is the difference between adding a Vite plugin in defineWxtModule and adding a plugin in wxt.config.ts? Is there a slight difference in the order and time of loading Vite plugins?

[aklinker1]

Order is one thing that's different... But vite plugins themselves shouldn't care about the order too much, so I doubt that's the problem.

I'm also using a custom vite plugin, not the one that ships with unimport. Can't remember why off the top of my head.

wxt/packages/wxt/src/builtin-modules/unimport.ts

Lines 61 to 86 in 8cd2bff

	export function vitePlugin(unimport: Unimport): Plugin {
	const ENABLED_EXTENSIONS = new Set([
	'.js',
	'.jsx',
	'.ts',
	'.tsx',
	'.vue',
	'.svelte',
	]);
	return {
	name: 'wxt:unimport',
	async transform(code, id) {
	// Don't transform dependencies
	if (id.includes('node_modules')) return;
	// Don't transform non-js files
	if (!ENABLED_EXTENSIONS.has(extname(id))) return;
	const injected = await unimport.injectImports(code, id);
	return {
	code: injected.code,
	map: injected.s.generateMap({ hires: 'boundary', source: id }),
	};
	},
	};
	}

There could be some edge case that that plugin handles that mine doesn't... it's quite naive looking at it now. Let's try replacing it with the one built into unimport.

[aiktb]

#1412

[aklinker1]

Released in v0.19.27