friendlyeats-web icon indicating copy to clipboard operation
friendlyeats-web copied to clipboard

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

Open spiffylogic opened this issue 1 year ago • 5 comments

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

spiffylogic avatar Jan 25 '24 18:01 spiffylogic

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.

Grenghis-Khan avatar Feb 01 '24 20:02 Grenghis-Khan

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
  }

rodnoycry avatar Feb 08 '24 14:02 rodnoycry

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?

FranciscoLagorio avatar Feb 13 '24 05:02 FranciscoLagorio

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

0xFlo avatar Feb 17 '24 11:02 0xFlo

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

EPMatt avatar Mar 14 '24 17:03 EPMatt