Steps to resolve the "ERESOLVE could not resolve" error during the deployment of Firebase functions

Trying to deploy my Firebase function with the command 

firebase deploy --only functions:nextServer
results in an error:

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
✔  functions: required API cloudfunctions.googleapis.com is enabled
✔  artifactregistry: required API artifactregistry.googleapis.com is enabled
✔  functions: required API cloudbuild.googleapis.com is enabled
i  functions: preparing codebase default for deployment
i  functions: Loaded environment variables from .env.
i  functions: preparing . directory for uploading...
i  functions: packaged /Users/tony/programming/options-outcry (87.22 MB) for uploading
✔  functions: . folder uploaded successfully
i  functions: updating Node.js 16 function nextServer(us-central1)...
Build failed: npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a797e73666f794a3f243b3a2439">[email protected]</a>
npm ERR! Found: @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691b0c080a1d295851475947585e">[email protected]</a>
npm ERR! node_modules/@types/react
npm ERR!   dev @types/react@"18.0.17" from the root project
npm ERR!   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157774667055203b253b25387479657d743b2c20">[email protected]</a>
npm ERR!   node_modules/@mui/base
npm ERR!     @mui/base@"5.0.0-alpha.95" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e131f0a1b0c171f123e4b504f4e504d">[email protected]</a>
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.10.0" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!   10 more (@mui/icons-material, @mui/material, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/react@"^17.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8af9fef3e6eff9cabfa4bbbaa4b9">[email protected]</a>
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"^5.9.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1466717577605425233a243a202d">[email protected]</a>
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^17.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e4d4a47525b4d7e0b100f0e100d">[email protected]</a>
npm ERR!   node_modules/@mui/styles
npm ERR!     @mui/styles@"^5.9.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /www-data-home/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /www-data-home/.npm/_logs/2022-09-04T21_53_24_874Z-debug-0.log; Error ID: beaf8772

Researching how to resolve ERESOLVE errors led me to adding the --legacy-peer-deps flag to the npm install command in general cases.

But since the installation is part of the Firebase functions' deployment process, I haven't found a way to include this flag (through firebase.json or any other means).

Is there a solution to this build error that only arises during Firebase deployment?

typescriptfirebasegoogle-cloud-functionsnpm-install

Answer №1

When faced with this issue, I successfully resolved it by including the npm flag within the "functions" segment of the firebase.json file:

  "functions": {
    "source": ".",
    "predeploy": [
      "npm --prefix \"$PROJECT_DIR\" install --legacy-peer-deps",
      "npm --prefix \"$PROJECT_DIR\" run build --legacy-peer-deps"
    ],
    "runtime": "nodejs14"
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected INTERNAL error encountered with Firebase's Cloud Function update

Currently, I am immersed in a project involving Vue.js 3, Typescript, and Firebase. However, while attempting to integrate new cloud functions, I came across an unexpected issue: Failed to load resource: the server responded with a status of 500 () Un ...

typescriptfirebasevue.jsgoogle-cloud-platform

TypeScript and Angular: Error Encountered when Trying to Combine Two Arrays

I'm attempting to combine two arrays of the same type that are nested within a "parent" array. The end goal is to flatten the structure. Below is the code I have been using: ngOnInit() { this.Logs.getAllLogs() .subscribe(logs => { ...

angulartypescript

Issues with the execution of Typescript decorator method

Currently, I'm enrolled in the Mosh TypeScript course and came across a problem while working on the code. I noticed that the code worked perfectly in Mosh's video tutorial but when I tried it on my own PC and in an online playground, it didn&apo ...

javascripttypescriptvisual-studio-codemethodsoutput

Issues with Injectable Service within Another Service in Angular 2

Having a problem with injecting a service into another service. I have a ContactService that retrieves data from the server using the handleError method, and an AlertService that handles errors thrown from the handleError method. Both services are declared ...

angulartypescriptangular2-services

What is the significance of TypeScript's dual generic typing feature?

defineListenerShape< EventName extends string, EventData extends { [key in EventName]: unknown; } > = <E extends EventName>(data: EventData[E]) => void; enum EventName { Click = 'click', Hover = 'hover' ...

typescripttypescript-generics

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

The variable 'data' is not a property of the type 'any[]'

I am currently facing an issue with a dummy service I created to fetch dummy data. When calling this service from a component ts file, I encountered the following error. After searching through some similar posts, I still haven't been able to resolve ...

angulartypescript

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

javascriptangulartypescriptd3.js

Substitute data types for certain keys within a Typescript interface

Within this code snippet, the goal is to create a new type from an existing one by iterating through the keys and only replacing those that meet a specific condition. Additionally, union types are being utilized here. class A {} class B { constructor ...

typescript

Personalizing Dialog Title in material-ui

While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...

reactjstypescriptmaterial-ui

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

cssreactjstypescriptreact-grid-layout

Next.js: Specify HTTP response code

I am working on a Next.js v12 application that is written in TypeScript. Within this application, I have created a custom error page called _error.tsx to provide a user-friendly experience for various errors such as 410, 404, and more. The issue I am faci ...

reactjstypescriptnext.js

Transforming a mongodb operation into an asynchronous function using await and async syntax

After calling the function to retrieve data from MongoDB, an undefined error occurs. It is suspected that converting the function to an async/await function may resolve this issue. However, there is uncertainty on how to make this conversion without disrup ...

mongodbtypescriptmongoose

Converting nested arrays to objects via JSON transformation

I am faced with a nested JSON array structure like this: Parent: { Child1: [ {name:'grandchild1', value:'abc', checked:true}, {name:'grandchild2', value:'pqr', checked:false} ], Ch ...

javascriptarraysjsontypescript

What is the correct way to type "this" to ensure it works properly when called in a subclass method?

Let's consider including an extension method to the existing Object: declare global { interface Object { ext<B>(f: (x: this) => B): B; } } The aim is to apply it as shown below: "x".ext(x => x.toUpperCase()) //or (1).ext(x => ...

typescript

Guide to setting the order of rendering in React applications

I am currently working with a .tsx file that renders two components: export default observer(function MyModule(props: MyModuleProps) { .... return ( <div> <TopPart></TopPart> <LowerPart>< ...

javascriptreactjstypescript

RxJs Subject: Acquiring the Sender

I have been working with Subjects and there is a .subscribe() in a specific class. Emitting values to this class from different other classes has resulted in the subscribe function being triggered multiple times, yet I am unsure of where these emits are co ...

angulartypescriptrxjs

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular

Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...

htmlcssangulartypescript

Extract the array structure from the resolved promises using await with Promise.all()

When I receive the values returned by using await Promise.all() in the following manner: const [apple, banana] = await Promise.all<Object, Object>([ applePromise(), bananaPromise() ]).catch(error => next(error)); An error is triggered: T ...

node.jstypescript

Restrain a Key according to the data type of its value within a universal category

I am currently working on creating a versatile function where the generic type is used to define its parameter. Here's an excerpt from this parameter : type Configuration<T> = { masterdata: T[], target: ???? } I am encountering difficu ...

typescripttypescript-generics