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?

[aiktb]

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

Step 1: Run commands

git clone https://github.com/aiktb/vue-browser-test.git
cd vue-browser-test
pnpm i
pnpm dev

Step 2: Open popup console

[aklinker1]

Hmm, weird, I don't know what's going on. This appears to be related to unimport, not Vue. Might be related to this comment from Discord:

I'll open an issue and debug further. Not sure why where you add the vite plugin would effect this...

[aklinker1]

OK, so this is a bug with WXT. Here's some debug output, you can see the problem: this import is added outside the <script> block lol

/home/aklinker1/Development/local/wxt-issue-1356/components/HelloWorld.vue
.vue
========================================
Original Code:
----------------------------------------
<script lang="ts" setup>
import { ref } from "vue";

defineProps({
  msg: String,
});

const count = ref(0);

const version = browser.runtime.getManifest().version;
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Version
      <code>{{ version }}</code>
    </p>
  </div>

  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the WXT and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

========================================
With auto-imports added:
----------------------------------------
import { browser } from 'wxt/browser';
<script lang="ts" setup>
import { ref } from "vue";

defineProps({
  msg: String,
});

const count = ref(0);

const version = browser.runtime.getManifest().version;
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Version
      <code>{{ version }}</code>
    </p>
  </div>

  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the WXT and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

[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