Server Components are not working

[joni1802]

Environment

OS: Windows 11
Node Version: v20.9.0
NPM Version: 10.2.3
Nuxt Version: 3.8.1

Reproduction

1. Create a new Nuxt project npx nuxi@latest init xxx.
2. Go to the project folder and run npm install.
3. Create a Server Component:

// components/TestServerComponent.server.vue
<script setup>
const dir = __dirname;
</script>

<template>
  <p>This runs on the server in the following directory: {{ dir }}</p>
</template>

4. Edit the app.vue filte:

// app.vue
<template>
  <TestServerComponent />
</template>

Describe the bug

1. When I run npm run dev the pages renders correctly. But doing changes in the server component are not updated on the page. I always have to stop the script and run npm run dev again to see the changes.
2. Running npm run build and start the server with node .output/server/index.mjs renders a blank page and the following error is logged in the console:

[Vue warn]: Component <Anonymous> is missing template or render function.

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

[huang-julien]

I don't think we have access to __dirname, and you should'nt rely on it since you won't have the same result in build (it's going to be somthing like *******/.output/public/_nuxt.

However we should improve the error message.

[joni1802]

Thank you for the fast response.
I have used __dirname just for testing because I know this is only available on the server side. Why this should not work? As of my understandig the code runs always on the server side and I should be able to use __dirname or fs.read() in scripts.
Also the HMR problem still persists even if I remove the __dirname thing.

[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

[github-actions]

This issue was closed because it was open for 7 days without a reproduction.