N
Nuxtā€¢3mo ago
timmaier

Nuxt build error (At least one <template> or <script> is required in a single file component)

After upgrading with nuxi upgrade --force. On cloudflare pages the error looks like this: 
[error] Nuxt Build Error: [vite:vue] [plugin vite:vue] node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue?nuxt_component=async&nuxt_component_name=Callout&nuxt_component_export=default: At least one <template> or <script> is required in a single file component. /opt/buildhome/repo/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue
[error] Nuxt Build Error: [vite:vue] [plugin vite:vue] node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue?nuxt_component=async&nuxt_component_name=Callout&nuxt_component_export=default: At least one <template> or <script> is required in a single file component. /opt/buildhome/repo/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue
9 Replies
timmaier
timmaierOPā€¢3mo ago
Here's some debug during dev 500 
[vite-node] [plugin:vite:vue] [SyntaxError] /@fs./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue?nuxt_component=async&nuxt_component_name=Callout&nuxt_component_export=default

import { defineAsyncComponent } from "vue"
export default defineAsyncComponent(() => import("/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue").then(r => r["default"] || r.default || r))
[vite-node] [plugin:vite:vue] [SyntaxError] /@fs./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue?nuxt_component=async&nuxt_component_name=Callout&nuxt_component_export=default

import { defineAsyncComponent } from "vue"
export default defineAsyncComponent(() => import("/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue").then(r => r["default"] || r.default || r))
If I update all packages to latest version in package.json. Running dev server spits out: 
[10:13:28 PM]  ERROR  Pre-transform error: At least one <template> or <script> is required in a single file component. /User/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue
[10:13:28 PM]  ERROR  Pre-transform error: At least one <template> or <script> is required in a single file component. /User/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_vit_ezp4jev2muxyj6xr72tb6wniau/node_modules/@nuxt/ui-pro/modules/pro/runtime/components/global/Callout.vue
Cue
Cueā€¢3mo ago
And do you have at least one template or script tag in the mentioned SFC?
!NEXOS CREATOR
!NEXOS CREATORā€¢3mo ago
It looks like your Callout.vue file is empty. Make sure the file includes at least one <template> or <script> block, as required for single file components.
timmaier
timmaierOPā€¢3mo ago
Hey thanks for the responses. Callout.vue is from nuxt ui pro package. There is no empty script tag. Project was working fine in same state before nuxi upgrade. After updating again I get 
[7:30:12 AM]  ERROR  Cannot start nuxt:  require() of ES Module /Users/tim/Code/site/node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js from /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js not supported.
Instead change the require of /Users/tim/Code/site/node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js in /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js to a dynamic import() which is available in all CommonJS modules.

  Instead change the require of node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js in /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js to a dynamic import() which is available in all CommonJS modules.
  at Object.<anonymous> (node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js:66:32)
[7:30:12 AM]  ERROR  Cannot start nuxt:  require() of ES Module /Users/tim/Code/site/node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js from /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js not supported.
Instead change the require of /Users/tim/Code/site/node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js in /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js to a dynamic import() which is available in all CommonJS modules.

  Instead change the require of node_modules/.pnpm/[email protected]/node_modules/html-tags/index.js in /Users/tim/Code/site/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js to a dynamic import() which is available in all CommonJS modules.
  at Object.<anonymous> (node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@vue/babel-plugin-jsx/dist/index.js:66:32)
Candyroll93
Candyroll93ā€¢3mo ago
Did you change the ā€¦?
amplitudes
amplitudesā€¢3mo ago
I'm in the exact same situation here, with @nuxt/content. Here's the error incase it adds any extra context: 
  SyntaxError: At least one <template> or <script> is required in a single file component. Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue
  at Object.parse$2 [as parse] (node_modules\.pnpm\@[email protected]\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1860:7)
  at createDescriptor (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:64:43)
  at transformMain (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2396:34)
  at Object.transform (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2940:16)
  at /Website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19918:40
  SyntaxError: At least one <template> or <script> is required in a single file component. Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue
  at Object.parse$2 [as parse] (node_modules\.pnpm\@[email protected]\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1860:7)
  at createDescriptor (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:64:43)
  at transformMain (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2396:34)
  at Object.transform (/Website/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2940:16)
  at /Website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19918:40
From my debugging, it seems to be something to do with async components. When adding a console.log of the descriptor object into the Vue compiler where the error is thrown, you can see the defineAsyncComponent, which never gets resolved: 
{
  filename: 'Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue',
  source: 'import { defineAsyncComponent } from "vue"\n' +
    'export default defineAsyncComponent(() => import("Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue").then(r => r["default"] || r.default || r))',
  template: null,
  script: null,
  scriptSetup: null,
  styles: [],
  customBlocks: [],
  cssVars: [],
  slotted: false,
  shouldForceReload: [Function: shouldForceReload]
}
{
  filename: 'Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue',
  source: 'import { defineAsyncComponent } from "vue"\n' +
    'export default defineAsyncComponent(() => import("Website/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@types+no_axu5chfqddbh5cdcaa6tz2fp3a/node_modules/@nuxt/content/dist/runtime/components/ContentDoc.vue").then(r => r["default"] || r.default || r))',
  template: null,
  script: null,
  scriptSetup: null,
  styles: [],
  customBlocks: [],
  cssVars: [],
  slotted: false,
  shouldForceReload: [Function: shouldForceReload]
}
@timmaier perhaps it's a module? If you're able to provide a list of the ones you use, I could xref with mine to see if there's anything in common. 
modules: [
  '@nuxtjs/tailwindcss',
  '@nuxt/image',
  '@nuxt/fonts',
  '@vue-macros/nuxt',
  '@productdevbook/chatwoot',
  '@nuxtjs/sitemap',
  '@nuxtjs/leaflet',
  '@cssninja/nuxt-toaster',
  '@nuxtjs/i18n',
  '@vue-final-modal/nuxt',
  '@nuxt/content',
  '@vee-validate/nuxt',
  '@nuxtjs/robots',
  '@nuxt/icon'
]
modules: [
  '@nuxtjs/tailwindcss',
  '@nuxt/image',
  '@nuxt/fonts',
  '@vue-macros/nuxt',
  '@productdevbook/chatwoot',
  '@nuxtjs/sitemap',
  '@nuxtjs/leaflet',
  '@cssninja/nuxt-toaster',
  '@nuxtjs/i18n',
  '@vue-final-modal/nuxt',
  '@nuxt/content',
  '@vee-validate/nuxt',
  '@nuxtjs/robots',
  '@nuxt/icon'
]
timmaier
timmaierOPā€¢3mo ago
Not at the computer just now but will do a bit more debugging later @amplitudes 
 modules: [
    '@nuxt/image',
    '@nuxtjs/i18n',
    '@nuxt/ui',
    '@vueuse/nuxt',
    '@vue-macros/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/robots',
    '@pinia/nuxt',
    '@nuxt/content',
    'nuxt-headlessui',
    'nuxt-og-image',
    '@nuxthq/studio'
  ],
 modules: [
    '@nuxt/image',
    '@nuxtjs/i18n',
    '@nuxt/ui',
    '@vueuse/nuxt',
    '@vue-macros/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/robots',
    '@pinia/nuxt',
    '@nuxt/content',
    'nuxt-headlessui',
    'nuxt-og-image',
    '@nuxthq/studio'
  ],
these are my modules Here's a gist with the full nuxt config: https://gist.github.com/timmaier/9d6f8d2b42d25f3c5427ac85eb941316
amplitudes
amplitudesā€¢3mo ago
I have a feeling it could be vue-macros due to the nature of it modifying the compiler, though I haven't looked into it much as it's used heavily in my project, so removing it for testing would be quite a chore Honestly not really sure what's going on here, I've tried making a minimal reproduction which doesn't appear to have the same issue šŸ¤” Think I've found a workaround for now, setting "@vue-macros/nuxt": "1.11.6" in my package.json, deleting the lockfile, then reinstalling seems to stop it from erroring
timmaier
timmaierOPā€¢3mo ago
Thanks mate this got me past the error too now I'm getting a memory issue when building šŸ˜‚ 
ā„¹ āœ“ built in 13.24s                                               10:05:25 PM
āœ” Server built in 13250ms                                         10:05:25 PM
ā„¹ Initializing prerenderer                                  nitro 10:05:25 PM

<--- Last few GCs --->

[3083:0x148008000]    69211 ms: Mark-Compact 4038.5 (4135.9) -> 4036.6 (4135.6) MB, 769.67 / 0.00 ms  (average mu = 0.500, current mu = 0.140) allocation failure; scavenge might not succeed
[3083:0x148008000]    70865 ms: Mark-Compact 4052.3 (4135.6) -> 4050.5 (4163.9) MB, 1649.92 / 0.00 ms  (average mu = 0.218, current mu = 0.002) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
ā„¹ āœ“ built in 13.24s                                               10:05:25 PM
āœ” Server built in 13250ms                                         10:05:25 PM
ā„¹ Initializing prerenderer                                  nitro 10:05:25 PM

<--- Last few GCs --->

[3083:0x148008000]    69211 ms: Mark-Compact 4038.5 (4135.9) -> 4036.6 (4135.6) MB, 769.67 / 0.00 ms  (average mu = 0.500, current mu = 0.140) allocation failure; scavenge might not succeed
[3083:0x148008000]    70865 ms: Mark-Compact 4052.3 (4135.6) -> 4050.5 (4163.9) MB, 1649.92 / 0.00 ms  (average mu = 0.218, current mu = 0.002) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
Want results from more Discord servers?
Add your server