Vue app aliases are not allowed in server routes. [importing #app from server/api/...]

jaspernbrouwer commented 2 years ago

Environment

Operating System: Darwin
Node Version: v18.9.0
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.1
Package Manager: yarn@1.22.19
Builder: vite
User Config: imports, modules, typescript
Runtime Modules: @nuxtjs/tailwindcss@5.3.3, unplugin-icons/nuxt
Build Modules: -

Reproduction

I'm following the guide to create a (server only) plugin: https://v3.nuxtjs.org/guide/directory-structure/plugins

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((NuxtApp) => {
    return {
        provide: {
            hello: "Hello World!",
        },
    };
});

Then follow the guide to create a server-route that uses that plugin: https://v3.nuxtjs.org/guide/features/server-routes

import { useNuxtApp } from "#app";

export default defineEventHandler((event) => {
    const { $hello } = useNuxtApp();

    return { hello: $hello };
});

I based the line with useNuxtApp() on: https://v3.nuxtjs.org/guide/directory-structure/plugins#automatically-providing-helpers

// alternatively, you can also use it here
const { $hello } = useNuxtApp()

Finally I browse to the application, hitting something that fetches the server-route, but the "Hello World!" string isn't getting through (meaning that whatever I use the value in, doesn't get rendered).

I do notice that when starting the Nuxt app, I see this error:

 ERROR  Vue app aliases are not allowed in server routes. [importing #app from server/api/...]

Describe the bug

The error is pretty clear to me, but what's not clear is what alternative to use. The docs state nothing about this.

The docs do state:

You can use .server or .client suffix in the file name to load a plugin only on the server or client side.

What is the correct way of using a plugin on the server side?

Additional context

I'm submitting this as a bug because I believe it is, either in the software or in the docs :)

Logs

Nuxi 3.0.0-rc.9                                                                                                                                       17:36:15
Nuxt 3.0.0-rc.9 with Nitro 0.5.1                                                                                                                      17:36:15
                                                                                                                                                      17:36:16
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.13.12:3000/
  > Network:  http://10.13.0.162:3000/

ℹ Using default Tailwind CSS file from runtime/tailwind.css                                                                          nuxt:tailwindcss 17:36:16
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                                                  nuxt:tailwindcss 17:36:16
ℹ Vite client warmed up in 336ms                                                                                                                      17:36:17
ℹ Vite server warmed up in 69ms                                                                                                                       17:36:17

 ERROR  Vue app aliases are not allowed in server routes. [importing #app from server/api/list.get.ts]                                                17:36:17

✔ Nitro built in 297 ms                                                                                                                         nitro 17:36:17
(node:84505) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
                                                                                                                                                      17:36:19
[vue-tsc] Found 0 errors. Watching for file changes.

danielroe commented 2 years ago

This error is correct here. Server routes run in a separate context and cannot access useNuxtApp (or, indeed, any Vue composables). Moreover, they run before the vue renderer, meaning that any plugins you create will not have run by the time your server handlers are running. (And in fact, for API routes, the Vue handler will never be called and your nuxt plugins/route middleware/etc will never run.)

jaspernbrouwer commented 2 years ago

Ah, then I guess server-plugins are for SSR only. Good to know, thanks!

nuxt / nuxt