Module not found warning when using firebase client SDK in the app directory

shutallbridge commented 1 year ago

Verify canary release

[x] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Sun Nov  6 23:31:16 PST 2022; root:xnu-8020.240.14~1/RELEASE_X86_64
Binaries:
  Node: 16.19.0
  npm: 8.19.3
  Yarn: 1.23.0-20220118.1001
  pnpm: N/A
Relevant packages:
  next: 13.1.7-canary.15
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/ShuHighBridge/issue-firebase-app-dir

To Reproduce

In the reproduction app, the Firebase emulator is used to make reproducing this issue easier.

Install the Firebase CLI to use the emulator

npm install -g firebase-tools

Fore more information on how to install the Firebase CLI, visit the Firebase CLI reference

In the project directory, start the Firebase emulator as a demo project

firebase emulators:start --project demo-test

While the emulator is running, start the next development server

yarn dev

Visit localhost to observe the error in the terminal

Describe the Bug

This warning is given both with next dev and next build. Firebase seems to function properly at least when tested with Firebase Authentication and Firestore in both development and build. However, this module resolution issue is worrying as it may cause other unforeseen issues...

This warning does not occur when Firebase SDK is used inside the pages directory.

warn  - ./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/ntrobot/Development/JS-Sandbox/issue-firebase-app-dir/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/@firebase/auth/dist/node-esm/index.js
./node_modules/firebase/auth/dist/index.mjs
./firebase.ts
./app/page.tsx

Expected Behavior

No warning should be given in both next dev and next build

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

shutallbridge commented 1 year ago

Found a similar issue here. Adding the encoding package seems to resolve this issue.

yarn add encoding

The warning messages have disappeared both in next dev and next build, but this doesn't explain why this warning occurs only in the app directory...

Here's the link to a new branch that uses this fix

brunoeduardodev commented 1 year ago

i also faced the same warning while using pnpm 8.6, also fixed by adding the encoding library as a dev dependency.

this problem probably isn't related to the package manager 👀

HasinduLanka commented 1 year ago

Same here. Running npm i encoding fixed the issue.

package.json dependencies:

"dependencies": {
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
    "@tailwindcss/forms": "^0.5.3",
    "@types/node": "18.16.1",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.1",
    "autoprefixer": "10.4.14",
    "encoding": "^0.1.13",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "firebase": "^9.22.2",
    "firebaseui": "^6.0.2",
    "mongodb": "5.0",
    "next": "13.3.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  }

landsman commented 8 months ago

vercel / next.js