Nuxt3 Error - Failed to find location of Firebase Functions SDK #5482

desk-pro · 2023-02-01T22:03:32Z

[REQUIRED] Environment info

firebase-tools: 11.22.0

Platform: Windows

[REQUIRED] Test case

npx firebase deploy

[REQUIRED] Steps to reproduce

The error occurs when using a nuxt v3.1.1 app in a monorepo.

First I build the app for production with npx cross-env NITRO_PRESET=firebase npm run build

Then I deploy on Firebase Hosting with npx firebase deploy

Here is my firebase.json :

{
  "functions": [
    {
      "source": ".output/server",
      "codebase": "nuxt"
    },
    {
      "source": "functions",
      "codebase": "functions",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint"
      ]
    }
  ],
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [{ "source": "**", "function": "server" }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

[REQUIRED] Expected behavior

Before upgrading to firebase-tools 11.22.0, I used 11.21.0 version. I was able to deploy on Firebase Hosting (although I was facing the #4952 issue and used the fix mentionned in the thread).

[REQUIRED] Actual behavior

I get following error :

Error: Failed to find location of Firebase Functions SDK. Please file a bug on Github (https://github.com/firebase/firebase-tools/).

The content of firebase-debug.log :

[debug] [2023-02-01T22:01:08.076Z] ----------------------------------------------------------------------
[debug] [2023-02-01T22:01:08.082Z] Command: C:\Program Files\nodejs\node.exe C:\Users\plsch\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js deploy --debug flag
[debug] [2023-02-01T22:01:08.084Z] CLI Version: 11.22.0
[debug] [2023-02-01T22:01:08.084Z] Platform: win32
[debug] [2023-02-01T22:01:08.084Z] Node Version: v16.16.0
[debug] [2023-02-01T22:01:08.086Z] Time: Wed Feb 01 2023 23:01:08 GMT+0100 (heure normale d’Europe centrale)
[debug] [2023-02-01T22:01:08.087Z] ----------------------------------------------------------------------
[debug]
[error]
[error] Error: Too many arguments. Run firebase help deploy for usage instructions

The text was updated successfully, but these errors were encountered:

memic84 · 2023-02-04T20:33:39Z

Same here.

My config

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "functions": [
    {
      "source": ".output/server",
      "codebase": "default"
    }
  ]
}

And after running firebase deploy --debug

[2023-02-04T20:24:41.052Z] Building nodejs source
[2023-02-04T20:24:41.053Z] Could not find functions.yaml. Must use http discovery

Error: Failed to find location of Firebase Functions SDK. Please file a bug on Github (https://github.com/firebase/firebase-tools/).

This is also a Nuxt 3 setup, with present Firebase.

DevJoghurt · 2023-02-06T09:38:48Z

This bug is a tracing error in unjs/nitro. It may be possible to fix this with a different packaging strategy on the firebase side but I don't know about that. I have already made a fix for nuxt:
unjs/nitro#627

In addition, you can now also use the following firebase config:

{
  "functions": [{
    "source": "./functions",
    "runtime": "nodejs18",
    "codebase": "fbFunctions"
  }],
  "hosting": [
    {
      "site": "nuxt-app",
      "source": "./app",
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/any-function",
          "function": "testfunction"
        }
      ]
    }
  ]
}

If you specify the nuxt app folder under "source", then firebase builds the app and that works fine for me.

rensvis · 2023-02-08T15:37:52Z

I'm having the same problem. Also Nuxt 3.

{
  "functions": {
    "source": ".output/server"
  },
  "hosting": {
    "site": "rens-vis-nuxt",
    "public": ".output/public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [{ "source": "**", "function": "server" }]
  }
}

DevJoghurt · 2023-02-09T09:45:23Z

@rensvis Sorry, I may have been unclear.
Currently there are two tooling strategies to get a Nuxt 3 app on firebase and both don't work properly:

If you do the tooling via nuxt3/nitro (as in your case), then the easiest way to deploy the app is to go to the .output/server folder and do npm install. Then you can use firebase deploy to publish the app. This solution is of course contrary to tracing by nitro and increases the package load. My fix for nitro would solve this problem though.
There is a new experimental tooling strategy using the cli from firebase. Here firebase does the tooling but there are still problems for nuxt 3 because nitro does a tracing of the packages and firebase uses npm. For this I also made a pull request ([frameworks] better nuxt3 support #5490).
Your firebase.json would look like this with this tooling strategy:

{
  "hosting": {
    "site": "rens-vis-nuxt",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true
  }
}

A function for nuxt would no longer need to be entered, as this would be handled by firebase cli. In my example I have only given another function folder as an example for further firebase functions.
You can now simply use the firebase cli for building the app:

firebase emulators:start
firebase deploy

However, I still ran into a few problems that I'm trying to solve in my pull request.

I hope this helps to understand a little better what the current state of nuxt3 and firebase interaction is and what solutions are currently available.

dosstx · 2023-02-11T13:07:11Z

I am having the same problem, but also when I ran npm i from the .output/server directory as mentioned above, I get the following error:

npm ERR! code 1
npm ERR! path C:\Users\XXX\Desktop\work\XXX\.output\server\node_modules\.nitro\@grpc\[email protected]
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c npm run compile
npm ERR! > @grpc/[email protected] compile
npm ERR! > tsc -p .
npm ERR!
npm ERR! error TS5057: Cannot find a tsconfig.json file at the specified directory: '.'.

Anyone have any ideas? My app is offline now because of this and can't deploy Nuxt server function to firebase!

DevJoghurt · 2023-02-13T10:49:10Z

@dosstx
Yes, it could be that the workaround with npm install has edge cases that provoke such errors. Might be because the tracing of nitro is not meant to install via npm afterwards.
I have written a node script that I have attached in the firebase.json as predeploy:

const fs = require('fs-extra')
const path = require('path')

const serverDir = __dirname + '/.output/server'

const functionDir = path.join(serverDir, 'node_modules', 'firebase-functions')
const nodeModulesDir = path.join(__dirname ,'node_modules')

if (fs.existsSync(functionDir)) {
  if (nodeModulesDir) {
    ['firebase-functions', 'semver'].map(name => fs.copySync(path.join(nodeModulesDir, name), path.join(serverDir, 'node_modules', name)))
    if (!fs.existsSync(path.join(serverDir, 'node_modules', '.bin'))) {
      fs.mkdirSync(path.join(serverDir, 'node_modules', '.bin'))
      fs.symlinkSync(path.join(functionDir, 'lib', 'bin', 'firebase-functions.js'), path.join(serverDir, 'node_modules', '.bin', 'firebase-functions'), 'file')
    }
  }
}

Simply save this code in the root directory as a deploy.js file and add the deploy script to your firebase.json file:

{
	"functions": [{
		"source": ".output/server",
		"predeploy": "node ./deploy.js"
	}],
	"hosting": [{
		"site": "your-site",
		"public": "./app/.output/public",
		"cleanUrls": true,
		"rewrites": [
			{
				"source": "**",
				"function": "server"
			}
		]
	}]
}

So i was able to work around the tracing bug and maybe it fixes your bug as well.
If not, it is more likely a bug in nitro or nuxt and you should create a bug report there.

dosstx · 2023-02-13T10:59:25Z

Thank you! Will give it a shot! @DevJoghurt

dosstx · 2023-02-27T15:16:17Z

I was able to fix this, but all I did was delete my functions directory and do a firebase init --only functions and it fixed all the issues for me. Of course, I am also using codebases format so my firebase.json looks like so:

{
  "functions": [
    {
      "source": ".output/server",
      "codebase": "nuxt",
      "runtime": "nodejs16"
    },
    {
      "source": "functions",
      "codebase": "functions",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    }
  ],
  "hosting": [
    {
      "site": "<removed>",
      "predeploy": "npm run build", // <---- I added this 
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "**",
          "function": "server"
        }
      ]
    }
  ]
}

jamesdaniels · 2023-04-12T02:19:52Z

This should now work with the source option:

{
  "functions": [
    {
      "source": "functions",
      "codebase": "functions",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    }
  ],
  "hosting": [
    {
      "site": "<removed>",
      "source": "."
    }
  ]
}

desk-pro · 2023-04-20T01:17:23Z

@jamesdaniels Could you please give more insight about your fix ? I don't understand what "source": "." does.

CharlieDigital · 2023-06-14T21:36:43Z

@dosstx's sample worked for me; however if I move the Nuxt application down from the root directory into a /web directory, the error returns again.

So if my path is like this: /web/.output/server. it doesn't work. If I have my output at .output/server (all Nuxt artifacts at the root of the project), everything works.

CharlieDigital · 2023-06-15T23:56:25Z

@desk-pro The "source": "." appears to be part of the new experimental Web Frameworks feature.

https://firebase.google.com/docs/hosting/frameworks/frameworks-overview

The way I can get it to work is the following:

Initialize Nuxt in the directory first.
When you run firebase init, it will detect the Nuxt app
The initialization will ask you which region you want to host your backend in
You do not need to use the firebase nitro preset; if you use the preset, it will generate an npm pack error.

To answer your question, the "source": "." points the CLI to the working directory where the Nuxt app exists (where the nuxt.config.ts is sitting).

NOTE: From my own experimentation, it doesn't seem to support using any nested directory like /nuxt-app for example. This generates a different type of error when deploying.

I have a sample repo here: https://github.com/CharlieDigital/nuxt3-firebase

And the app running here:

https://nuxt3-firebase-fn-2.web.app/ (SSG)
https://nuxt3-firebase-fn-2.web.app/client-app (client only)
https://nuxt3-firebase-fn-2.web.app/rendered (SSR)

Still working out some kinks; hoping the documentation gets updated.

typefox09 · 2023-09-24T09:19:42Z

@desk-pro The "source": "." appears to be part of the new experimental Web Frameworks feature.

https://firebase.google.com/docs/hosting/frameworks/frameworks-overview

The way I can get it to work is the following:

Initialize Nuxt in the directory first.

When you run firebase init, it will detect the Nuxt app

The initialization will ask you which region you want to host your backend in

You do not need to use the firebase nitro preset; if you use the preset, it will generate an npm pack error.

To answer your question, the "source": "." points the CLI to the working directory where the Nuxt app exists (where the nuxt.config.ts is sitting).

NOTE: From my own experimentation, it doesn't seem to support using any nested directory like /nuxt-app for example. This generates a different type of error when deploying.

I have a sample repo here: https://github.com/CharlieDigital/nuxt3-firebase

And the app running here:

https://nuxt3-firebase-fn-2.web.app/ (SSG)

https://nuxt3-firebase-fn-2.web.app/client-app (client only)

https://nuxt3-firebase-fn-2.web.app/rendered (SSR)

Still working out some kinks; hoping the documentation gets updated.

How did you go with this? I noticed when doing this with VueFire auth you get this error on build:

[nuxt] [request error] [unhandled] [500] Failed to parse service account json file: Error: Service account object must contain a string "project_id" property.

CharlieDigital · 2023-09-24T14:09:24Z

The VueFire error is because it's trying to run the Firebase client on the server and fails.

The gist of the workaround for this error is to isolate the Firebase dependent code to only run on the client. You can use a variety of techniques for this.

The easiest: if the page doesn't need server rendering, then set routeRules with { ssr: false } for the route. If the page requires server rendering, you'll need to isolate the client dependency using Nuxt <ClientOnly/>: https://nuxt.com/docs/api/components/client-only (move the Firebase dependent code into a component and only load that component on the client).

typefox09 · 2023-09-24T21:10:38Z

The VueFire error is because it's trying to run the Firebase client on the server and fails.

The gist of the workaround for this error is to isolate the Firebase dependent code to only run on the client. You can use a variety of techniques for this.

The easiest: if the page doesn't need server rendering, then set routeRules with { ssr: false } for the route. If the page requires server rendering, you'll need to isolate the client dependency using Nuxt <ClientOnly/>: https://nuxt.com/docs/api/components/client-only (move the Firebase dependent code into a component and only load that component on the client).

But I'm checking auth and fetching Firestore results server side? I need this for key landing pages for SEO.

The build currently works when running the buiild normally and deploying it without Firebase's new experimental hosting feature. Although you mentioned when you nested the project you have issues (ie /nuxt-app), I'm wondering If this is the issue as I'm doing the same in a monorepo

CharlieDigital · 2023-09-24T21:14:33Z

On the server side, you use the Admin SDK. But the problem is that if you are running your code with SSR and it's loading the client SDKs as well, you'll get the error.

So in your SSR routes, you need to isolate the client SDKs from the server SDKs and ensure that the SSR routes don't load the client SDKs.

typefox09 · 2023-09-24T21:21:05Z

Hmm ok interesting.thinking into it, most of the calls are being made with Vuefire. I'll dig into it and see how I go. Thank you.Quick question, why is it that the build and deploy to Firebase works without using Firebase's new hosting feature?On 25 Sept 2023 7:14 am, Charles Chen ***@***.***> wrote: On the server side, you use the Admin SDK. But the problem is that if you are running your code with SSR and it's loading the client SDKs as well, you'll get the error. So in your SSR routes, you need to isolate the client SDKs from the server SDKs and ensure that the SSR routes don't load the client SDKs. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

CharlieDigital · 2023-09-24T21:39:11Z

why is it that the build and deploy to Firebase works without using Firebase's new hosting feature

If you look carefully the output of the build process, the new Firebase Hosting Web Frameworks is effectively generating a Function that is very similar to what the Nuxt Firebase build preset does. They are somewhat interchangeable.

superdiazzz · 2024-03-06T16:39:43Z

Any solution? i have tried some answers above but still fail? My last attempt was performing firebase init functions it makes my firebase.json like so,

{
  "functions": [
    {
      "source": ".output/server",
      "codebase": "default",
      "runtime": "nodejs16"
    },
    {
      "source": "nuxt",
      "codebase": "nuxt",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    }
  ],
  "hosting": {
    "predeploy": "npm run build",
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

it created new folder functions but when doing deploy still return error. Console error said,

Error: There was an error reading .output/server/package.json:

 .output/server/index.js does not exist, can't deploy Cloud Functions

CharlieDigital · 2024-03-06T16:47:25Z

@superdiazzz Can you verify that there is actually output at .output/server/index.js?

superdiazzz · 2024-03-06T17:46:50Z

@CharlieDigital

@superdiazzz Can you verify that there is actually output at .output/server/index.js?

I think i was in wrong way, so i tried another way with this tutorial. I get back from beginning and make my firebase.json below:

{
  "functions": [
    {
      "source": ".output/server",
      "runtime": "nodejs16"
    }
  ],
  "hosting": {
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

i change my nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    preset: 'firebase'
  },
.....

then run this scrip in package.json

"deploy-fb": "cd .output/server && rm -rf node_modules && npm i && cd .. && firebase deploy",

But, sadly it failed with no clue ;(

it just said like so,

desk-pro added the type: bug label Feb 1, 2023

aalej added the integration: web frameworks label Feb 2, 2023

desk-pro mentioned this issue Feb 13, 2023

Function deployment fails with npm workspaces/nx - Error: spawn ./node_modules/.bin/firebase-functions ENOENT #4952

Closed

jamesdaniels closed this as completed Apr 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxt3 Error - Failed to find location of Firebase Functions SDK #5482

Nuxt3 Error - Failed to find location of Firebase Functions SDK #5482

desk-pro commented Feb 1, 2023 •

edited

Loading

memic84 commented Feb 4, 2023 •

edited

Loading

DevJoghurt commented Feb 6, 2023

rensvis commented Feb 8, 2023

DevJoghurt commented Feb 9, 2023 •

edited

Loading

dosstx commented Feb 11, 2023 •

edited

Loading

DevJoghurt commented Feb 13, 2023

dosstx commented Feb 13, 2023

dosstx commented Feb 27, 2023 •

edited

Loading

jamesdaniels commented Apr 12, 2023

desk-pro commented Apr 20, 2023 •

edited

Loading

CharlieDigital commented Jun 14, 2023

CharlieDigital commented Jun 15, 2023

typefox09 commented Sep 24, 2023

CharlieDigital commented Sep 24, 2023

typefox09 commented Sep 24, 2023

CharlieDigital commented Sep 24, 2023

typefox09 commented Sep 24, 2023 via email

CharlieDigital commented Sep 24, 2023

superdiazzz commented Mar 6, 2024

CharlieDigital commented Mar 6, 2024

superdiazzz commented Mar 6, 2024 •

edited

Loading

Nuxt3 Error - Failed to find location of Firebase Functions SDK #5482

Nuxt3 Error - Failed to find location of Firebase Functions SDK #5482

Comments

desk-pro commented Feb 1, 2023 • edited Loading

[REQUIRED] Environment info

[REQUIRED] Test case

[REQUIRED] Steps to reproduce

[REQUIRED] Expected behavior

[REQUIRED] Actual behavior

memic84 commented Feb 4, 2023 • edited Loading

DevJoghurt commented Feb 6, 2023

rensvis commented Feb 8, 2023

DevJoghurt commented Feb 9, 2023 • edited Loading

dosstx commented Feb 11, 2023 • edited Loading

DevJoghurt commented Feb 13, 2023

dosstx commented Feb 13, 2023

dosstx commented Feb 27, 2023 • edited Loading

jamesdaniels commented Apr 12, 2023

desk-pro commented Apr 20, 2023 • edited Loading

CharlieDigital commented Jun 14, 2023

CharlieDigital commented Jun 15, 2023

typefox09 commented Sep 24, 2023

CharlieDigital commented Sep 24, 2023

typefox09 commented Sep 24, 2023

CharlieDigital commented Sep 24, 2023

typefox09 commented Sep 24, 2023 via email

CharlieDigital commented Sep 24, 2023

superdiazzz commented Mar 6, 2024

CharlieDigital commented Mar 6, 2024

superdiazzz commented Mar 6, 2024 • edited Loading

desk-pro commented Feb 1, 2023 •

edited

Loading

memic84 commented Feb 4, 2023 •

edited

Loading

DevJoghurt commented Feb 9, 2023 •

edited

Loading

dosstx commented Feb 11, 2023 •

edited

Loading

dosstx commented Feb 27, 2023 •

edited

Loading

desk-pro commented Apr 20, 2023 •

edited

Loading

superdiazzz commented Mar 6, 2024 •

edited

Loading