Module failing to load on Nuxt 3.0.0-rc.4

Version

@nuxtjs/supabase: 0.1.17 nuxt: 3.0.0-rc.4

Reproduction Link

https://github.com/gregmulvaney/supabase_error

Steps to reproduce

• Fresh Nuxt 3 app generated with Nuxi
• Install @nuxtjs/supabase
• Add entry to Nuxt build modules
• Run nuxt dev

What is Expected?

It works

What is actually happening?

While Vite does start up, as soon as you attempt to load the site in a browser it hangs and then eventually returns a 503. Console outputs Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ...to show where the warning was created)

Removing @nuxtjs/supabase from the modules list fixes this error.

Update

I am amble to use the module if I run nuxt build and nuxt preview. Still does not work with nuxt dev

[pi0]

Thanks for making the issue and reproducing with the latest working version. I’ve managed to find the fix but worth sharing the story.

First thing first, in order to find more information about the cause of the error, as the Node.js message tells, we can use --trace-warnings:

$ node --trace-warnings node_modules/.bin/nuxi dev

/home/pooya/tmp/supabase_error/node_modules/@supabase/postgrest-js/dist/module/lib/types.js:10
export class PostgrestBuilder {
^^^^^^

SyntaxError: Unexpected token 'export'

This means our dev bundle is importing an invalid ESM module from @supabase/postgrest-js. Read more in v3 Docs about invalid ESM modules.

There are two entries to inspect:

• .nuxt/dev/index.mjs (nitro bundle)
• .nuxt/server/server.mjs (vite bundle for nuxt app) <-- issue is here

Searching for import and import(), there is the problematic import line in vite bundle:

import("file:///home/pooya/tmp/supabase_error/node_modules/@supabase/postgrest-js/dist/module/lib/types.js")

The issue is that @supabase/postgreest-js has filed, is using ESM syntax bu not comply with what Node.js expecting for ESM code to use .mjs extension or type: "module" in nearest package.json. Now with Nuxt 3, we took some smart ideas to automatically detect this situation and inline the dependency using vite or rollup that can handle such mixed syntax. (unjs/externality and unjs/mlly#isValidNodeImport).

This was automatically working until postgrest-js@0.37.3 because types.js had an import statement but in 0.37.4 that import was removed and regex in mlly wasn’t enough to cover only export class PostgrestBuilder

So how is the fix and steps:

• Supabase module should explicitly add all esm-incompatible @supabase/ packages explicitly to thee build.transpile step to avoid such regressions when automated detector doesn’t works.
• Improving mlly syntax detection to detect export class and categorize as ESM (https://github.com/unjs/mlly/commit/896c8a7dd087d041ffb29a00065a4f71d62ed249)
• Ask @supabase libraries to fix ESM issue. Solution is as easy as adding a package.json to the dist/module/ with type: module or (much better) use .mjs/.cjs syntax.

[larbish]

After digging a lot in sub dependencies, I finally found the guilty. I’ll soon provide a release to fix it. To fix it temporary, can you try to add a resolutions field in your package.json with:

"resolutions": {
    "@supabase/postgrest-js": "0.37.3"
}