use[FIREBASEPRODUCT]Emulator conflicts with react hooks

[codesby]

[REQUIRED] Describe your environment

• Operating System version: Windows 10 Home 21H1
• Browser version: Microsoft Edge Version 90.0.818.62 (Official build) (64-bit)
• Firebase SDK version:^9.0.0-beta.1
• Firebase Product: _____ (storage, firestore)

[REQUIRED] Describe the problem

Can't use the naming convention useSomethingEmulator with react it throws a
error React Hook "useFirestoreEmulator" cannot be called at the top level. React Hooks must be called in a
React function component or a custom React Hook function react-hooks/rules-of-hooks

Steps to reproduce:

Attempting to use any emulator suite within a react app

Relevant Code:

// TODO(you): code here to reproduce the problem
useFirestoreEmulator(getFirestore(), "localhost", 8080)

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[codesby]

The workaround I came up with

//Create a React Hook Function
const EnableEmulators = () => {
  useFirestoreEmulator(getFirestore(), "localhost", 8080)
  useStorageEmulator(getStorage(), 9199)
}

useEffect(() => {
  //Call the function is the useEffect hook
  if (window.location.hostname === "localhost") EnableEmulators()
})

[looptheloop88]

Hi @codesby, thanks for the report. I was able to reproduce the error. It seems that the useSomethingEmulator methods are treated as React Hooks which need to be called inside a React Hook function based on these rules.

While we are exploring for potential solutions, please continue to use the workaround that you've shared with us. Thanks.

[Feiyang1]

Hmm, That's an unfortunate coincidence.

You can rename the import to workaround it:
import { useFirestoreEmulator as applyFirestoreEmulator } from 'firebase/firestore'

@yuchenshi, @samtstern, should we consider renaming the functions to avoid the conflict with react? (Given that React is really popular, so people are likely to run into this confusion).

@jhuleatt, any thoughts?

[codesby]

No problem at all the import as definitely is a better approach

…

On Fri, May 21, 2021 at 11:57 AM Feiyang ***@***.***> wrote: Hmm, That's an unfortunate coincidence. You can rename the import to workaround it: import { useFirestoreEmulator as applyFirestoreEmulator } from 'firebase/firestore' @yuchenshi <https://github.com/yuchenshi>, @samtstern <https://github.com/samtstern>, should we consider renaming the functions to avoid the conflict with react? (Given that React is really popular, so people are likely to run into this confusion). @jhuleatt <https://github.com/jhuleatt>, any thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4930 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARV3M6WTXLB2AHLUSMLZPF3TO2GGDANCNFSM45H7KA5A> .

[jhuleatt]

@Feiyang1's import solution will definitely solve it. Otherwise, since this is just an eslint rule, you can disable the warning with an eslint-disable-next-line comment:

// eslint-disable-next-line react-hooks/rules-of-hooks
useFirestoreEmulator(getFirestore(), "localhost", 8080);

Either solution (renaming the import or the eslint ignore) will work for any of the emulator setup functions: useAuthEmulator, useDatabaseEmulator, useFirestoreEmulator, useFunctionsEmulator, useStorageEmulator.

[hsubox76]

If you don't like one-off line disables there's also some suggestions in this issue for configuring eslint to only apply the react eslint rules to files that use react. facebook/react#15227 (comment)