nuxt: Vite SSR dev bundler transpile error by using firebase-admin sdk

Same here

[nuxt] [request error] Cannot read properties of undefined (reading 'Auth')
  at $id_b788ed7e (./.nuxt/dist/server/server.mjs:3177:44)
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:4458:3)

Here’s that specific line

// --------------------
// Request: /node_modules/firebase-admin/lib/esm/auth/index.js
// Parents: 
// - /plugins/auth.server.ts ($id_0a045b03)
// Dependencies: 
// - /node_modules/firebase-admin/lib/auth/index.js ($id_d0eb9116)
// --------------------
const $id_b788ed7e = async function (global, module, exports, __vite_ssr_exports__, __vite_ssr_import_meta__, __vite_ssr_import__, __vite_ssr_dynamic_import__, __vite_ssr_exportAll__) {
const __vite_ssr_import_0__ = await __vite_ssr_import__("/node_modules/firebase-admin/lib/auth/index.js");


const Auth = __vite_ssr_import_0__.default.Auth;
Object.defineProperty(__vite_ssr_exports__, "Auth", { enumerable: true, configurable: true, get(){ return Auth }});

firebase-admin exports esm too

Starting with nitropack@0.4.4 and unenv@0.5.2, we are using a cross-version compatible of node-fetch (unjs/node-fetch-native) that should resolve the issue when multiple versions of node-fetch exist in a project.

Please use npx nuxi upgrade --force to receive this update.

However, I think there are more things attached to this issue so keeping it open.

Glad it works! Yes we are going to roll it out as default (aimed to be before the stable releases).

I have just done the following in my project:

• Added experimental.viteNode = true to nuxt config.
• npx nuxi upgrade --force
• Verified yarn.lock is using nitropack@0.4.4 and unenv@0.5.2

Unfortunatley I am seeing the same as @areindl - production builds (nuxi build) succeeds but dev (nuxi dev) results in the error:

Nuxt CLI v3.0.0-rc.3-27539143.46c656c                                                        
                                                                                             
  > Local:    http://localhost:3000/ 
  > Network:  http://10.1.5.27:3000/
  > Network:  http://10.1.1.10:3000/

ℹ Merging Tailwind config from ~/tailwind.config.js                        
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                        
ℹ Vite server using experimental vite-node...                                                
ℹ Vite server warmed up in 139ms                                                             
✔ Nitro built in 1079 ms                                                              
ℹ Vite client warmed up in 4876ms                                                            
(node:77639) 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)

Interestingly, this “Warning” appears only when I try to hit the local HTTP server in my browser. Dev server appears to build as normal, but errors when trying to hit it.

@DevJoghurt @antfu - I tried to build the project and now there is a new issue:

Ran the build using npm run build - no errors.

Then trying to run the app:

 forks/nuxt3-firebase-auth-starter   master  node .output/server/index.mjs --trace-warnings
(node:29544) 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)
/Users/anton/repos/forks/nuxt3-firebase-auth-starter/.output/server/node_modules/node-fetch/src/index.js:9
import http from 'node:http';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)
 ✘  forks/nuxt3-firebase-auth-starter   master  

Not sure if this is a NUXT or Firebase issue.

But node-fetch is actually using type:“module”: https://github.com/node-fetch/node-fetch/blob/043a5fcfc82884155bcb2afba2a82333b2f29c02/package.json#L7

I can also confirm that it works 👌

Thanks @antfu!

It worked ✅. Firebase Auth is now loading as expected.

Here is my reproduction repo: https://github.com/areindl/nuxt3-firebase-auth-starter

Will this be a default in the future?

I guess we can close it then.

Could you try enabling vite-node by

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    viteNode: true
  }
})

And see if it fixes the issue? Thanks.