I am trying to deploy Firebase functions project, on two different target projects on Firebase. One is in region "us-cenral" and the other one is "europe-west".
I'm using only functions and RTDB from Firebase, I don't have a need for "hosting".
At the start, I was having only one Firebase project region:"us-central" and I was able to deploy functions without problem. I have created another project recently in region:"europe-west" on the same billing account. And also in the local project I have added that another project using command:
firebase use --add project2
Since I didn't deploy functions for a couple of months and there was no need to check if deployment is still working on "project1" I have not checked if this functionally is working.
After adding "project2" I have issued command to deploy for the first time on another region.
When using command: "firebase deploy --only functions"
command ended with the following error:
There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.
! functions: Upload Error: HTTP Error: 403, Permission denied on 'locations/null' (or it may not exist).
Error: HTTP Error: 403, Permission denied on 'locations/null' (or it may not exist).
[2022-05-11T19:32:17.580Z] Error Context: {
"body": {
"error": {
"code": 403,
"message": "Permission denied on 'locations/null' (or it may not exist).",
"status": "PERMISSION_DENIED"
}
},
"response": {
"statusCode": 403
}
}
Switching back to project1 and trying to deploy the same thing, I got the same error.
So now I'm stuck. Does anyone have experience with this problem and how to overcome it.
Google support suggest to create "App Engine application", I cannot see how this can help as I didn't had that thing in the 1st place and everything was working. Now with the second project I have this error that suggest permissions problem. Since I have OWNER account on both of these projects what could be wrong?
What I have done so far:
installed the latest firebase tools (same problem)
defined default region on both projects (as stated above)
checked that I'm logged with the OWNER account (also switched between different owner account but the same issue)
checked permissions and din't find anything useful
default service accounts exist on both projects with rights
visited suggested link: https://console.cloud.google.com/appengine
on both projects (and still have the same error although not sure if I need to deploy?!? - I don't have anything there to deploy or do I?)
Config package.json:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"engines": {
"node": "10"
},
"dependencies": {
"canvas": "^2.6.1",
"firebase-admin": "^10.2.0",
"firebase-functions": "^3.21.0",
"jsbarcode": "^3.11.0",
"qrcode": "^1.4.4"
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-plugin-promise": "^4.0.1",
"firebase-functions-test": "^0.2.0"
},
"private": true
}
Configuration didn't changed from the 1st deploy to project1 when everything was working fine.
At the end I found out the reason for my problem, and posting just to help the others if they end up with the same error.
The problem was not deployment script "per se" but the function that was connected to fetch data from RTDB on the project. Method "region" was supposed to get configured "region(fnRegion)" value, but that variable value was "null" and resulted with the error posted above during deployment.
function selectDatabaseReference(path = '/') {
return functions
.region(fnRegion) // Sets function region
.database
.ref(path); // Sets database reference path
}
It would be nice if I could get more descriptive error to the real cause of the error (I'm not truly sure, what would be the content of that error message though).
Anyway it's good I was not able to deploy functions because of this.
I'm working on a project and when I try to run parcel dev or build command it outputs the following error:
× Build failed.
#parcel/core: Failed to resolve 'process' from './node_modules/#firebase/firestore/dist/index.esm2017.js'
D:\Workspace\Front-End\Apps\RISC-Aswan\node_modules\#firebase\firestore\dist\index.esm2017.js:5741:38
5740 | return t.store(e);
> 5741 | }
> | ^
5742 | // visible for testing
5743 | /** Parse User Agent to determine iOS version. Returns -1 if not found. */
It was working before and now I don't know the cause of the problem. I tried to delete node__modules folder and run npm install but nothing changes.
I have the following imports in the script file:
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';
the second line importing the firestore is what causing the problem, commenting it leads to everthing works fine.
Here's a photo with the terminal message and the esm2017.js file
My package.json dependecies:
"devDependencies": {
"autoprefixer": "^10.4.2",
"parcel": "^2.2.1",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.18"
},
"dependencies": {
"firebase": "^9.6.6",
"vanilla-hamburger": "^0.2.3"
}
for some reason modifying alias to the following worked in dev and build
"alias": {
"process": {
"global": "{}"
}
}
Here's the other suggested workaround i tried mentioned in this issue
used alias in my package.json file
"alias": {
"process": "false"
}
manually installed process package
"dependencies": {
"process": "^0.11.10",
},
updated node to v16.14.0 instead of v16.13.1.
used parcel build ./src/index.html and removed "source": "./src/index.html" in the package.json
In your package.json you are defining parcel to be the higher version compatible with 2.2.1:
"devDependencies": {
"autoprefixer": "^10.4.2",
"parcel": "^2.2.1"
// Rest of packages
Currently there is an issue in the GitHub repository for parcel regarding this problem with Firebase. While that issue shows your exact error message, the general issue to keep track of is this open issue, since this problem affects libraries other than Firebase. Something you could do is to avoid using an affected version of parcel (2.3.1 as far as I see on the issues), or keep track of the issue to update to a fixed version when it releases.
EDIT (2/23/2021):
It seems that both GitHub issues are now closed with the release of Parcel 2.3.2. I tested building a React project with Parcel and Firebase using version 2.3.1, and I encountered the exact same error as you. Updating to 2.3.2 solved the issue completely on my end without any other change of dependencies. Just in case anyone comes across this thread later on.
I was using yarn on netlify and had to do this to fix:
echo 'nodeLinker: node-modules' >> /opt/build/repo/.yarnrc.yml
After firebase deploy in flutter web I get this error:
In this answer person recommends firebase init, but I already have Firebase in the app.
Thanks for any ideas!
I came across this issue with a custom build process and pointing only to my dist folder.
There are three requirements for a successful build:
a firebase.json with functions.source pointing to a directory containing a package.json
The package.json containing a "main":"path-to-index.js" field.
A node engine specified in either the package.json or firebase.json
//firebase.json
{
"functions": {
"source": "./some-dir"
}
}
//some-dir/package.json
{
"main": "lib/index.js",
"engines": {
"node": "16"
}
}
Update 1 : Updated the latest working solution to #Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
Parsing error: Cannot find module 'next/babel'
Require stack:
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\config-array-factory.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.
In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.
TL;DR - see this answer which points to this blog. This fixed it for me.
Some Details
For example, if I have:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
But then I get the same error you're experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.
If that's the case for you as well, then what you need (as described in the links above) is to:
Create a workspace config
Specify folders where you need ESLint to run
You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
Note: You don't need to create extra .babelrc file
In your NextJS Project you have this file , named .eslintrc.json,
In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note: If you only replace with
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.
For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.
{
"extends": ["next/core-web-vitals", "prettier"]
}
In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.
{
"eslint.packageManager": "pnpm"
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p and search for ESLint: Restart ESLint Server.
It worked for me by just adding prettier in .eslintrc file.
{
"extends": ["next", "prettier"]
}
Try updating the .eslintrc.json file to
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already
npm install eslint-plugin-prettier#latest --save-dev
Don't have to include .babelrc file as it will replace Nextjs SWC compiler
S
I had this same problem - Close the IDE and reopen it with the project folder !!
My Problem
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.
My Solution
add this into the ESLint config file:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.
Upgrade React version to latest
Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.
To upgrade you can run the following command:
npm install react#latest react-dom#latest
Or using yarn:
yarn add react#latest react-dom#latest
Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:
npm install next#latest
or
yarn add next#latest
Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.
Add prettier to your project
yarn add --dev eslint-config-prettier
Update your eslint config as follows
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.
ctrl + shift + p
TypeScript: Restart TS server
Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO
In my project, i just run yarn add #babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
it works, and npm run lint works fine too.
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue's gone.
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module