Module not found: Can't resolve '@firebase/auth'

[sheriffyusuf]

@Ehesp I get this issue when i try to use @react-query-firebase/auth with firebase v9.4.1, the issue surfaces once i try to import
import { useAuthSignInWithEmailAndPassword } from "@react-query-firebase/auth";

and try to use useAuthSignInWithEmailAndPassword hook

[Ehesp]

Hey could you show me your package.json file please?

[sheriffyusuf]

Here it is @Ehesp , I use yarn 2 as my package manager

{
  "name": "some-random-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "generate": "graphql-codegen --config codegen.js"
  },
  "dependencies": {
    "@apollo/client": "^3.3.11",
    "@chakra-ui/media-query": "^1.0.5",
    "@chakra-ui/react": "^1.3.3",
    "@chakra-ui/system": "^1.3.1",
    "@chakra-ui/theme-tools": "^1.0.4",
    "@clerk/nextjs": "^2.0.1",
    "@clerk/types": "^1.14.3",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@react-query-firebase/auth": "^0.3.4",
    "@react-query-firebase/firestore": "^0.4.2",
    "@types/js-cookie": "^2.2.6",
    "apollo-upload-client": "^14.1.3",
    "dayjs": "^1.10.4",
    "deepmerge": "^4.2.2",
    "embla-carousel": "^4.1.3",
    "firebase": "^9.4.1",
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0",
    "framer-motion": "^3.3.0",
    "graphql": "^15.5.0",
    "js-cookie": "^2.2.1",
    "little-state-machine": "^4.0.2",
    "lodash.mergewith": "^4.6.2",
    "next": "11.0.0",
    "next-seo": "^4.20.0",
    "next-with-apollo": "^5.1.1",
    "nookies": "^2.5.2",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-hook-form": "^6.15.4",
    "react-icons": "^4.3.1",
    "react-paystack": "^3.0.5",
    "react-player": "^2.9.0",
    "react-query": "^3.29.0",
    "react-use-wizard": "^1.1.2",
    "use-local-storage": "^2.2.5"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.21.1",
    "@graphql-codegen/introspection": "^1.18.1",
    "@graphql-codegen/named-operations-object": "^2.0.0",
    "@graphql-codegen/near-operation-file-preset": "^1.17.13",
    "@graphql-codegen/typescript": "^1.21.0",
    "@graphql-codegen/typescript-operations": "^1.17.14",
    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
    "@types/apollo-upload-client": "^14.1.0",
    "@types/node": "^14.14.28",
    "@types/react": "^17.0.2",
    "firebase-functions-test": "^0.2.0",
    "typescript": "4.3.2"
  }
}

[Ehesp]

This is really weird... Have you deleted your entire node_modules and reinstalled?

I've weirdly seen some oddness in the firebase packages; they seem to install themselves and then add themselves to the @firebase namespace too. Will investigate.

[Ehesp]

Yeah in my node_modules I have this:

[Ehesp]

Ok so firebase has dependencies on @firebase/x as you can see here: https://github.com/firebase/firebase-js-sdk/blob/master/packages/firebase/package.json#L222-L247

I'm not sure why this isn't working; try nuking everything and re-installing. If that doesn't work I'll try yarn 2 myself.

[Ehesp]

You might have to do this as a workaround, seems Firebase doesn't support Yarn 2 / pnp.

[sheriffyusuf]

Thanks, I will try it out.

[sheriffyusuf]

Found a temporary workaround fix for now, had to manually install @firebase/app and @firebase/auth, somewhat similar to what you suggested above. Thanks for your help. I will be closing this for now.