Nuxt3 api/me route cannot resolve import from '#supabase/server'

[ASoldo]

Hi, I'm having typescript error saying that cannot find module in "#supabase/server" even tho everything works fine, it's just that error. Tried in VS Code, Nvim and got same error. For now i use // @ts-ignore for that part but it's just so I can find fix for it. Anybody know how to fix this?

Version

@nuxtjs/supabase: v0.3.7
nuxt: v3.5.3

Steps to reproduce

Create server/api/me.ts and try to import serverSupabaseUser without typescript error

What is Expected?

Typescript should be able to import and show types for serverSupabaseUser when importing.

What is actually happening?

Typescript is throwing error that it cannot find module or declaration in #supabase/server as shown in image above.

[richardvanbergen]

@ASoldo I'm getting the same thing. I think it's something to do with how VSCode is resolving the generated types in .nuxt/types/supabase.d.ts as the typescript compiler doesn't seem to have an issues with it.

My hack is a little more tolerable than @ts-ignore. I simply copied the type defs to server/types.d.ts. Unfortunately I wasn't able to find the root issue in the time I have.

declare module "#supabase/server" {
  const serverSupabaseClient: typeof import("../node_modules/@nuxtjs/supabase/dist/runtime/server/services").serverSupabaseClient;
  const serverSupabaseServiceRole: typeof import("../node_modules/@nuxtjs/supabase/dist/runtime/server/services").serverSupabaseServiceRole;
  const serverSupabaseUser: typeof import("../node_modules/@nuxtjs/supabase/dist/runtime/server/services").serverSupabaseUser;
}

[MSufianS]

I also get the same issue.
Any idea to solve this issue?

[VlaD-T]

Maybe it will be helpfull to someone. I also had this problem and it appears that the import path could not be resolved. What personally helped to me:

1. Supabase import was moved to line 1; Maybe there was some conflict

import { serverSupabaseUser } from '#supabase/server'

2. Instead of JS use TS. TypeScript handles imports differently

After these 2 steps my app worked again.

[ljcremer]

I am facing the same issue. Have someone solved it yet?

[ljcremer]

I managed to solve it with a tsconfig.json file like this:
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "bundler",
"esModuleInterop": true,
"allowJs": true,
"strict": true,
"baseUrl": ".",
"paths": {
"/": ["./"],
"@/": ["./"],
"/server/": ["server/"],
"#supabase/server": [".nuxt/supabase/server"]
}
},
"include": [
".ts",
"scripts/.ts",
"server/**/.ts",
"types/.ts",
".nuxt/types/supabase.d.ts" // Ensure this is picked up
],
"exclude": ["node_modules", ".nuxt/dist"]
}

[phillipmohr]

None of the solutions worked for me but I found this related issue #471 and implemented the proposed solution which solved the issue for me.

You can add this to your server/tsconfig.json

"compilerOptions": {
    "paths": {
      "#supabase/server": ["../node_modules/@nuxtjs/supabase/dist/runtime/server/services"],
      "#supabase/server/*": ["../node_modules/@nuxtjs/supabase/dist/runtime/server/services/*"],
      "#supabase": ["../node_modules/@nuxtjs/supabase/dist/runtime"],
      "#supabase/*": ["../node_modules/@nuxtjs/supabase/dist/runtime/*"],
      "~/*": ["../*"] // Needed to add this line so other typescript imports are still working on the server side
    }
  }

[eth-gre]

You beat me to posting this! The correct file to edit is .nuxt/tsconfig.server.ts.

Just a heads up for everyone who tries this though, this is a temporary fix. Nuxt will automatically overwrite this file every now and then, which will undo these changes, and you'll either have to re-edit the file or live with that red squiggly line. Hopefully a permanent fix is implemented soon :)

[ojvribeiro]

In my case, somehow the @nuxtjs/supabase was removed from the modules array in nuxt.config.ts. I can't tell it was me or not.

Adding it back solved the issue for me.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.