React Module not found: Error: Default condition should be last one - node.js

I'm working on a React project setup using node 16.17.0, Create React App "react-scripts": "^5.0.0" with "react": "^17.0.2"
Everything was working fine until this morning. When I try to npm run start or npm run build, it gives me the below error. The npm install works fine showing no errors.
The errors that I am getting are:
ERROR in ./src/services/auth/firebase/firebase.js 3:0-45
Module not found: Error: Default condition should be last one
ERROR in ./src/services/auth/firebase/firebase.js 4:0-40
Module not found: Error: Default condition should be last one
ERROR in ./src/app/pages/payout/PayoutOpen.js 5:0-39
Module not found: Error: Default condition should be last one
ERROR in ./node_modules/#react-query-firebase/auth/dist/bundle.es.js 3:0-78
Module not found: Error: Default condition should be last one
ERROR in ./node_modules/#react-query-firebase/auth/dist/bundle.es.js 4:0-720
Module not found: Error: Default condition should be last one
This is how my firebase.js file looks like:
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebase = initializeApp({
apiKey: "********",
authDomain: "*******",
projectId: "*********",
storageBucket: "**********",
messagingSenderId: "***************",
appId: "****************",
measurementId: "*************"
});
export const auth = getAuth(firebase);
I tried to remove node_modules folder, remove package-lock.json file, clear npm cache but nothing works. I also tried to install using yarn but it shows the same error.

Fresh issue as per 03 Feb 2023, happens due to firebase v9.17.0.
Fix:
npm un firebase
npm i firebase#9.16.0
Or:
modify package.json, use "firebase": "9.16.0" instead of "firebase": "^9.16.0".
run npm i or yarn.
Related github issue: https://github.com/firebase/firebase-js-sdk/issues/7005

Related

How to solve Module not found: Error: Can't resolve 'fs' without overriding webpack config

I have a react app and all of a sudden I got the below errors while I run npm start:
ERROR in ./node_modules/sass/sass.dart.js 118:12-25
Module not found: Error: Can't resolve 'fs' in .......
webpack compiled with 1 error and 1 warning
I manage to handle it with adding fallback to webpack.config.js like below:
.....
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
fallback:{
"fs":false
},
}
it solved the problem but I don't want to override webpack.config.js because if I remove my node modules and some one else tries to npm install then he will get the error again.
how can I solve the error without overriding webpack.config.js?

Vue Error - Can't resolve 'https' when importing package

I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.
Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.
cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs
Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):
const RaApi = require('raapijs');
export default {
name: 'App',
data: () => ({
api:null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
}
run `npm run serve' and get the error:
ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'
I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.
The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?
EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.
This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:
const RaApi = require('raapijs');
export default {
data: () => ({
api: null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
};
It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.
So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.

Unable to authenticate against Firestore emulator

I'm using Firebase admin with Node + Express to update Firestore documents from Appengine. I have some tests that I want to have using the Firestore emulator. Here's the error I'm getting:
Error in post /requests Error: {"servicePath":"localhost","port":8080,
"clientConfig":{},"fallback":true,"sslCreds":{"callCredentials":{}},
"projectId":"test-project","firebaseVersion":"9.4.1","libName":"gccl",
"libVersion":"4.7.1 fire/9.4.1","ssl":false,
"customHeaders":{"Authorization":"Bearer owner"},"scopes":[
"https://www.googleapis.com/auth/cloud-platform",
"https://www.googleapis.com/auth/datastore"
]}
You need to pass auth instance to use gRPC-fallback client in browser. Use OAuth2Client from google-auth-library.
Before each test I'm calling:
var serviceAccount = require(process.env.FIREBASE_SA_CREDENTIAL);
firebaseAdmin.initializeApp({
credential: admin.credential.cert(serviceAccount),
projectId: 'test-project'
});
And the test is using a class that simply accesses Firestore like this:
this.db = firebaseAdmin.firestore();
...
I've got the following npm dependencies:
"#google-cloud/firestore": "^4.7.1",
"firebase": "^8.0.2",
"firebase-admin": "^9.4.1"
"firebase-tools": "^8.16.2"
I'm starting the emulators and running tests with:
firebase emulators:exec 'jest --verbose=false'
I can't see what's incorrect in the config - As far as I can see, the emulator should accept all auth. The error message suggests it's using some frontend library rather than a backend library, but the dependencies all appear to be correct.
OK, solved. There was an important line missing from jest config:
module.exports = {
testEnvironment: 'node'
}
testEnvironment: 'node'. This was triggering some behaviour in the Firebase libs that made them think the environment was a browser.

pg.Pool is not a constructor

I have a google cloud function using this code and it gives the error TypeError: pg.Pool is not a constructor at exports.postgresDemo I have
{
"dependencies": {
"pg": "^2.0.5"
}
}
as the dependencies. I don't know if the error is in node or cloud functions
Should have been obvious from your dependencies :
"dependencies": {
"pg": "^2.0.5"
}
}
I ran this:
const pg = require('pg')
const pool = new pg.Pool()
console.log(pool)
and got the expected result. Difference is, in my dependencies, I have :"pg": "^7.7.1". The google example you are using also uses a more recent version of pg.
I tried to install your version to double check using npm install pg#2.0.5 but got the error: npm ERR! notarget No matching version found for pg#2.0.5
So upgrade pg and it will work

Firebase -Node.js auto complete doesn't show .auth() or it's accompanying methods

I'm running Node version 7.8.0
I have installed the Firebase and Firebase-admin modules into a Server side Node.js app.js file. I want to use these 2 methods:
var myCustomToken = '12345'
firebaseAdmin.auth().createCustomToken(myCustomToken) //firebaseAdmin.auth()
firebase.auth().authenticateWithCustomToken(myCustomToken) // firebase.auth()
The problem is dot .auth() doesn't show up for either module so I can't get to use the 2 methods. There are other methods that are tied to both modules that appear (in pics below) but .auth() isn't one of them.
For e.g.
firebaseAdmin.initializeApp(... //works
firebaseAdmin.credential.cert(... //works
firebase.initializeApp(...) //works
These are the modules I installed in the folder that was initialized with npm:
npm install firebase-admin --save
npm install algoliasearch --save
npm install firebase --save
These are the dependencies inside my package.json file:
"engines": {
"node": "7.8.0"
},
"dependencies": {
"algoliasearch": "^3.22.1",
"firebase": "^3.7.4",
"firebase-admin": "^4.1.4"
}
How can I get .auth() to appear on each module so I can access the 2 methods I need?
Firebase-admin module autocomplete:
Firebase module autocomplete:
Autocomplete results for both modules .auth() doesn't exist:
Have a look at https://firebase.google.com/docs/admin/setup
and https://firebase.google.com/docs/auth/admin/create-custom-tokens#create_custom_tokens_using_the_firebase_admin_sdk
for createCustomToken()
As for the client part, did you try signInWithCustomToken() ?
I filed an issue report at the Firebase-admin github repo and they got back to me and said that even though the .aut() object isn’t showing up in Sublime’s autocomplete it does exist. Since I knew the methods I was looking they said I could just manually put in the code and it would work which in fact it did.
One thing they suggested was that next time I can go into the node_modules folder and I would see that it does exist there:
node_modules/firebase-admin/lib/firebase-namespace.js
this is what is there:
Object.defineProperty(FirebaseNamespace.prototype, "auth", {
/**
* Gets the `Auth` service namespace. The returned namespace can be used to get the
* `Auth` service for the default app or an explicitly specified app.
*/
get: function () {
var _this = this;
var fn = function (app) {
return _this.ensureApp(app).auth();
};
return Object.assign(fn, { Auth: auth_1.Auth });
},
enumerable: true,
configurable: true
});
Basically if your using Sublime and autocomplete isn’t showing what your looking for just manually type it in and look through the node_modules folder to verify it’s there.
Another alternative is to use VSCode or Vim instead of Sublime and the autocomplete should work there.

Resources