Reactfire fails in Next/React app due to "Attempted import error"

340 Views Asked by Savvas Christodoulou At 04 June 2023 at 10:25

I'm wrapping the children of my Next root layout with the Reactfire providers I need:

import './globals.css';
import { AuthProvider, FirebaseAppProvider } from 'reactfire';
import { auth, firebaseConfig } from '../config/firebase';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (

        <html lang="en">
            <body>
                <FirebaseAppProvider firebaseConfig={firebaseConfig}>
                    <AuthProvider sdk={auth}>
                        {children}
                    </AuthProvider>
                </FirebaseAppProvider>
            </body>
        </html>

    )
}

firebaseConfig is correct as I can connect to my Firebase app successfully using the firebase module.

When I run npm run dev it fails with the following error:

Import trace for requested module:

../node_modules/reactfire/dist/index.js
./src/app/layout.tsx
- error ../node_modules/reactfire/dist/index.js
Attempted import error: 'createContext' is not exported from 'react' (imported as 'f').

I tried updating npm, downgrading to the previous Reactfire version, clearing npm cache, reinstalling all node modules, and using the exact setup structure given by Reactfire docs.

Original Q&A

There are 1 best solutions below

MarkusDreyer On 20 September 2023 at 13:02

I had the same issue, and tried to downgrade to some later version, which provided some hints that would be helpful in this error message. For me, the issue was that I was configuring the FirebaseAppProvider in the entry point of my app, just like you. However, FirebaseAppProvider uses useContext, which is a client side feature. This means that the file needs a 'use client' annotation at the top of the file.

Further complicating this is the fact that you can't just smack 'use client' at the top of the of the layout.tsx-file (can't remember exactly why).

I solved the issue by creating a separate component Providers where I placed the FirebaseAppProvider and added the 'use client' annotation at the top of the file, like so:

// app/providers.tsx
'use client' //<- REMEMBER THIS

import { FirebaseAppProvider } from 'reactfire'

export function Providers({ children }: { children: React.ReactNode }) {
    const firebaseConfig = {
        ...
    };


    return (
        <FirebaseAppProvider firebaseConfig={firebaseConfig}>
            {children}
        </FirebaseAppProvider>
    )
}

Then, I could use it in my layout.tsx-file like so:

//app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}

Hope this helps!

Reactfire fails in Next/React app due to "Attempted import error"

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in FIREBASE

Related Questions in NEXT.JS

Related Questions in REACT-CONTEXT

Related Questions in REACTFIRE

Trending Questions

Popular # Hahtags

Popular Questions