3.10.x: nuxt build creates vue files in .nuxt/dist/server/_nuxt folder

[MickL]

Environment

- Operating System: Darwin
- Node Version:     v21.2.0
- Nuxt Version:     3.10.0
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  bun@1.0.25
- Builder:          -
- User Config:      devtools, css, modules, runtimeConfig, image, build, i18n, ignore, nitro, routeRules, security, vite
- Runtime Modules:  @nuxtjs/i18n@8.1.0, @nuxt/image@1.3.0, nuxt-icon@0.6.8, nuxt-security@1.1.1
- Build Modules:    -

Reproduction

Describe the bug

With 3.10.0 and 3.10.1 I get an error at the end of nuxt build: ERROR RollupError: At least one <template> or <script> is required in a single file component, with 3.9.3 everything is fine.

Unfortunately I cant reproduce this in the sandbox but I already tried to debug this for hours. I nailed it down to one of my ~10 components: If it contains a <style> tag with ANY content (even just a comment). Weirdly when I delete the content of the <script> tag I can have styles:

Throws the error:

<script setup lang="ts">
// hello
</script>

<template>
  hello
</template>

<style lang="scss">
// hello
</style>

Doesnt throw an error:

<script setup lang="ts">
// hello
</script>

<template>
  hello
</template>

<style lang="scss"></style>

Doesnt throw an error:

<script setup lang="ts"></script>

<template>
  hello
</template>

<style lang="scss">
// hello
</style>

It also only happens with this one component named overlay.vue. I feel like I am getting crazy or something but this seems to make absolutely no sense.

Full error:

 ERROR  RollupError: At least one <template> or <script> is required in a single file component.         nitro 9:00:59 PM


undefined


 ERROR  At least one <template> or <script> is required in a single file component.                            9:00:59 PM

  at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at Object.error (node_modules/rollup/dist/es/shared/node-entry.js:18507:20)
  at Object.error (node_modules/rollup/dist/es/shared/node-entry.js:17616:42)
  at node_modules/rollup-plugin-vue/dist/sfc.js:22:49
  at Array.forEach (<anonymous>)
  at Object.transformSFCEntry (node_modules/rollup-plugin-vue/dist/sfc.js:22:16)
  at Object.transform (node_modules/rollup-plugin-vue/dist/index.js:99:38)
  at node_modules/rollup/dist/es/shared/node-entry.js:18692:40 



 ERROR  At least one <template> or <script> is required in a single file component.                            9:00:59 PM

error Command failed with exit code 1.

Additional context

No response

Logs

No response

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[danielroe]

This is unlikely to be an issue with Nuxt - rollup-plugin-vue is not used by Nuxt or Nitro and is what is throwing your error.

[MickL]

I am not 100% sure about that. Yes this plugin throws the error BUT I disabled the plugin and realized there is exactly one .vue file in the folder .nuxt/dist/server/_nuxt which is exactly the file I debugged to be the one creates the error. This is because when the nitro server is built the vue-rollup-plugin loads this file but it is not a vue SFC.

So the cause of this issue is that Nuxt creates a vue file in the .nuxt/dist/server/_nuxt folder and I guess that shouldnt be the case:

• Like above: If I delete the <script> or the <style> within the componen this file doesnt get created.
• New discovery: If I add a new component then this one ALSO gets a vue file in the .nuxt folder

[danielroe]

Interesting. Have you customised assetFileNames by any chance?

[MickL]

I did not

[danielroe]

I probably can't look into this without a reproduction or more info.

[MickL]

I can try to dig more into this and make this reproducable. Atm both StackBlitz and CodeSandBox are not working tho.

[MickL]

@danielroe So it took me a few hours of removing more and more stuff from my app until I ended in an empty app and I realized:

This happens on a blank empty app created with nuxi init and just a single index page and a single component in it:

Since StackBlitz doesnt seem to work, here is the repo: https://github.com/MickL/nuxt-bug

From my tryings the following needs to be true:

• Needs to have a page (doesnt occur with app.vue)
• Needs to have <script> with setup and lang="ts"
• <script> needs to have something in it (can even be a comment)
• <style> needs to have something in it (can even be a comment when adding lang="scss")

[danielroe]

When you say that StackBlitz doesn't work, what do you mean?

[danielroe]

I can't reproduce with that repo.

Here's a StackBlitz created from it - seemingly working fine: https://stackblitz.com/edit/github-iqamf7.

Could you share any more info about your setup?

[MickL]

I used bun install then bun run build if that changes anything (which I doubt). My specs are at the very top. I think #25690 could be the same issue, he said the same:

I noticed this oddity. If I remove all the scss code from the style tag in layout, then everything starts working correctly, but if I add at least one class there, then default.css stops being generated in the production build.

will double check my repo tomorrow

[MickL]

So I double checked on another machine and this time I used npm. I downloaded my repo, run npm install and then npm run buld. If I check the folder .nuxt/dist/server/_nuxt I see (as I described) there is a vue file which is probably supposed to be a js file:

nuxi info

------------------------------
- Operating System: Darwin
- Node Version:     v21.6.1
- Nuxt Version:     3.10.1
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  npm@10.2.4
- Builder:          -
- User Config:      devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Same issue in your Stackblitz:

Both of the machines I tested on are Silicon Macs, the one from the other issue seems to be a Linux system.

[danielroe]

You're quite right; it is reproducible there - I was checking .output, not .nuxt.

[kominov]

it's my issue - #25690, and you right, i have the same

[KresimirCosic]

I am not sure if this is causing me problems now - I updated my packages to latest (all of them), and somehow I get an error:

cannot find module './stringify' (module in question is qs, which is only used by Strapi module as far as I can tell)

This only happens in dev mode, build is running fine. When I don't include the Strapi module in the configuration everything works.

If I keep use the Nuxt ^3.10.1 version I have no problems. Does any of this ring a bell?