"Can't resolve encoding" warning in the console when used with Next JS 13.4

[raajnadar]

[REQUIRED] Describe your environment

• Operating System version: Mac OS X
• Browser version: latest Chromium
• Firebase SDK version: 9.21.0
• Firebase Product: auth (auth, database, storage, etc)

[REQUIRED] Describe the problem

Steps to reproduce:

You need to import the package in a newly created next js application & run the application in the dev

- warn ../node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '<path>/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
./context/AuthProvider.tsx
./app/root-layout.tsx

Relevant Code:

import { getAuth } from 'firebase/auth'

export const auth = getAuth()

The solution is to use the new version of node fetch in https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/package.json

[jbalidiong]

Hi @raajnadar, thanks for reaching out. I was able to replicate the behavior that shows the warning when using Next JS 13.4. Let me check what we can do for this issue or bring someone from the Auth team that can provide more context about it. I’ll update this thread if I have any information to share.

[prameshj]

There is a WIP to update the node-fetch version, but it has some CI failures which needs investigation - #5476

Can you clarify which node-fetch version resolved the issue for you? Thanks!

[raajnadar]

@prameshj in the CI logs it seems there are typescript errors which can be resolved easily

[raajnadar]

Can this be added to the package?

https://stackoverflow.com/a/76092251/5519872

[matamatanot]

@prameshj

https://nextjs.org/docs/architecture/supported-browsers#polyfills
https://www.npmjs.com/package/whatwg-fetch

Next.js replaces fetch with whatwg-fetch
and

In addition, to reduce bundle size, Next.js will only load these polyfills for browsers that require them. The majority of the web traffic globally will not download these polyfills.

If necessary, dynamically importing node-fetch is preferable since fetch is already available in many default environments.

[hsubox76]

We will try to upgrade node-fetch to v3 if possible. It looks like this will not be fixed in any version of node-fetch v2: node-fetch/node-fetch#675

Dynamic imports would be a larger change, we have avoided including dynamic import statements in the SDK for a while because not all environments support them. It may be time to revisit this as support has increased a lot in the last few years. It still doesn't work in Node 12 and below so at the very least we'll have to bump the latest version of Node we support and put it somewhere in the docs. We'll need to do a thorough review to explore what other unusual environments might not be covered, e.g. React Native, browser extensions, incognito/private, service workers.