firebase / friendlyeats-web

Apache License 2.0
437 stars 393 forks source link

Breaks in Next.js 14: Can't resolve 'fs' #271

Open spiffylogic opened 5 months ago

spiffylogic commented 5 months ago

I tried upgrading this codelab to Next.js 14 and I get the following error:

./node_modules/@google-cloud/storage/build/src/bucket.js:21:11 Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./node_modules/@google-cloud/storage/build/src/index.js ./node_modules/firebase-admin/lib/storage/storage.js ./node_modules/firebase-admin/lib/app/firebase-namespace.js ./node_modules/firebase-admin/lib/default-namespace.js ./node_modules/firebase-admin/lib/index.js ./src/lib/firebase/firebase.js ./src/lib/firebase/auth.js ./src/components/Header.jsx

Grenghis-Khan commented 5 months ago

I had a similar issue which was do to my npm package.json. It should have the following

"dependencies": {
    "@google-cloud/firestore": "^6.7.0",
    "firebase": "^10.3.1",
    "firebase-admin": "^11.10.1",
    "next": "^13.5.6",
    "protobufjs": "^7.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "encoding": "^0.1.13"
  },
  "browser": {
    "fs": false,
    "os": false,
    "path": false,
    "child_process": false,
    "net": false,
    "tls": false
  }

insert those and run npm install again and see if it works.

rodnoycry commented 4 months ago

Thank you, @Grenghis-Khan! I've added this code to the end of my package.json file, and it's now working perfectly.


  "browser": {
    "fs": false,
    "os": false,
    "path": false,
    "child_process": false,
    "net": false,
    "tls": false
  }
FranciscoLagorio commented 4 months ago

Does this example work in Next 14? I am encountering an error when attempting to query using firebase/firestore in layout.js (server component) after setting security rules. ⨯ Internal error: FirebaseError: Missing or insufficient permissions. How can I perform a query using Firebase/Firestore within a server component?

0xFlo commented 4 months ago

requests is outdated. took firebase years to remove it fully so I'm surprised this is containing requests as a dependency

EPMatt commented 3 months ago

This issue seems related to next >= 14.0.1. Tested that this example works with next 14.0.0.