Nuxt 3.4.3 global components incompatible

[maartenvanhunsel]

After upgrading to Nuxt 3.4.3 global components are having issues loading in Vitest test environment. Not sure but I think nuxt/nuxt#20547 is causing this issue.

SyntaxError: At least one <template> or <script> is required in a single file component.
 ❯ Object.parse$4 [as parse] ../node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5269:21
 ❯ createDescriptor ../node_modules/@vitejs/plugin-vue/dist/index.mjs:70:43
 ❯ transformMain ../node_modules/@vitejs/plugin-vue/dist/index.mjs:2273:34
 ❯ TransformContext.transform ../node_modules/@vitejs/plugin-vue/dist/index.mjs:2785:16
 ❯ Object.transform ../node_modules/vite/dist/node/chunks/dep-a178814b.js:42877:44
 ❯ loadAndTransform ../node_modules/vite/dist/node/chunks/dep-a178814b.js:53334:29

Serialized Error: {
  "id": "/components/global/Avatar.vue",
  "plugin": "vite:vue",
  "pluginCode": "import { defineAsyncComponent } from "vue"
export default defineAsyncComponent(() => import("/components/global/Avatar.vue").then(r => r.default))",
}

[guynikan]

I'm facing the same error with Nuxt version 3.4.3 and nuxt-vitest version 0.6.12.

I'm missing something?

SyntaxError: At least one <template> or <script> is required in a single file component.
 ❯ Object.parse$4 [as parse] ../node_modules/.pnpm/@vue+compiler-sfc@3.2.47/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5269:21
 ❯ createDescriptor ../node_modules/.pnpm/@vitejs+plugin-vue@4.2.1/node_modules/@vitejs/plugin-vue/dist/index.cjs:74:43
 ❯ transformMain ../node_modules/.pnpm/@vitejs+plugin-vue@4.2.1/node_modules/@vitejs/plugin-vue/dist/index.cjs:2277:34
 ❯ TransformContext.transform ../node_modules/.pnpm/@vitejs+plugin-vue@4.2.1/node_modules/@vitejs/plugin-vue/dist/index.cjs:2789:16
 ❯ Object.transform ../node_modules/.pnpm/vite@4.1.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41685:44
 ❯ loadAndTransform ../node_modules/.pnpm/vite@4.1.4_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39479:29

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
  "id": "/home/guynikan/repos/riva/web/components/global/Sections/Banner.vue",
  "plugin": "vite:vue",
  "pluginCode": "import { defineAsyncComponent } from "vue"
export default defineAsyncComponent(() => import("/home/guynikan/repos/riva/web/components/global/Sections/Banner.vue").then(r => r.default))",
}

[danielroe]

@guynikan That issue should have been resolved in nuxt-vitest v0.6.12. Would you provide a reproduction?

[guynikan]

Sure!

here: https://stackblitz.com/edit/nuxt-starter-5rirfg

[danielroe]

This is how you configure it: https://stackblitz.com/edit/nuxt-starter-8ifrgz?file=vitest.config.js.

[guynikan]

Thanks, Daniel!