next.js: Attempted import error: 'useRef' is not exported from 'react' (imported as 'React')

Link to the code that reproduces this issue

https://github.com/cthacker-udel/BugRepros

To Reproduce

My layout.tsx:

/* eslint-disable react/hook-use-state -- disabled */

"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React, { type ReactNode } from "react";

/**
 * The properties of the QueryProvider component
 */
type QueryProviderProperties = {
    /**
     * The element being "wrapped" by the provider
     */
    readonly children: ReactNode;
};

/**
 * The provider for the Query implementation
 *
 * @param children - The element being "wrapped" by the provider
 * @returns The provider with the passed down `queryClient` value
 */
export const QueryProvider = ({
    children,
}: QueryProviderProperties): JSX.Element => {
    const [queryClient] = React.useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        staleTime: 60 * 1000,
                    },
                },
            }),
    );

    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
};

Result:

import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/@tanstack/react-query-devtools/build/modern/devtools.js
./node_modules/@tanstack/react-query-devtools/build/modern/index.js
./src/providers/query/QueryProvider.tsx

Current vs. Expected behavior

Current: Crashing using next dev, and crashing during next build, completely blocking development. Expected: Working as it was before updating next to latest

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A

Which area(s) are affected? (Select all that apply)

Module resolution (CJS / ESM, module resolving)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), Vercel (Deployed)

Additional context

The bug is in the tanstackbug folder of the repo

NEXT-2362

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Reactions: 16
  • Comments: 30 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Same issue here with react-query.

In addition I am getting this error, which is maybe related:

○ Compiling / ...
⨯ ../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').

Interestingly, the problems are gone when I use next dev --turbo.

+10
dawi on Jan 19, 2024

Solved this problem in next js 14.1.0, solution: I was able to solve this problem by removing browserslist:[…] of the package.json and I admit that this version is much more optimal. thanks

+7
hamizjafari on Jan 19, 2024

Happening to me as well with several imports, all from React (createElement, useState, flushSync, etc) since updating to 14.1 this morning. Worked ok with 14.0.4.

+6
alessandrojcm on Jan 19, 2024

We had a fix in #61791 and released in v14.1.1-canary.44 for this issue 🙏

+2
huozhi on Feb 8, 2024

Adding this to package.json finally solved this issue. Deleted node_modules/.cache and .next folders. During the first run there where many errors but after that the app runs again.

"browserslist": [ "Chrome 118" ]

Hope the root cause will be fixed soon to remove this workaround again.

+2
cbratschi on Jan 30, 2024

@NanningR last time I tried turbo it wasn’t quite working for me, I’ll try again thanks.

@mikesprague fwiw this does affect production for me as well, the build step fails with the same error.

+2
alessandrojcm on Jan 27, 2024

Solved this problem in next js 14.1.0, solution: I was able to solve this problem by removing browserslist:[…] of the package.json and I admit that this version is much more optimal. thanks

Thanks! It worked, but only after I also deleted the .next folder.

+2
Saarnaki on Jan 20, 2024

I’m having the same issue. The error occurs for the first time in 14.0.5-canary.20

+2
tillschweneker on Jan 19, 2024

I had this too - I didn’t have browserslist but it popped up when I used the shad-cn dropdown-ui component.

I had to add "use client" to to component (which makes sense) but then I had to nuke my .next folder for it to actually make the error go away.

+1
wesbos on Feb 1, 2024

@cthacker-udel I’m not sure what’s going on with next dev behind the scenes either, but I’m glad this temporary solution worked for you.

@alessandrojcm Another temporary solution that might work for you is changing your package.json, such that it runs “next dev” with the experimental/beta turbo flag:

"scripts": { "dev": "next dev --turbo",

This works for me, even without the browserlist tweak. However, I need to run without the turbo flag because it’s still in beta, and it breaks the functionality of some of my pages. It might help you though

+1
NanningR on Jan 26, 2024

+1 . Build is breaking showing the following error “Attempted import error: ‘useRef’ is not exported from ‘react’ (imported as ‘e’).” after upgrading from 14.0.4. I’ve tried removing browserslist in package.json and does not work.

+1
ritchieanesco on Jan 23, 2024

Going off https://github.com/vercel/next.js/issues/60909, we’ve worked around this by adding Chrome 118 explicitly in our .browserslistrc file so it looks like the following:

[development]
Chrome 118
last 1 chrome version
last 1 edge version
last 1 firefox version
last 1 safari version
+1
alitas on Jan 23, 2024

I thought the issue for me was that I was accidentally importing something into middleware that wasn’t being tree shaken properly, but I guess it’s not based on other comments?

Don’t have browserlists in package.json so I cannot delete that. For me it doesn’t crash the build process, but just pollutes my terminal during development or build and I’m also not sure if something might break during runtime later when app is running.

It also doesn’t list React imports as problematic, but rather a react-hook-form export. I get this message multiple times:

Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

It’s very random, I originally had an issue with an import from the @mantine/tiptap package. Thought that maybe I was importing it from a server component or something but after I removed that package the issue just came from another import.

+1
alessandrojcm on Jan 20, 2024

I thought the issue for me was that I was accidentally importing something into middleware that wasn’t being tree shaken properly, but I guess it’s not based on other comments?

Don’t have browserlists in package.json so I cannot delete that. For me it doesn’t crash the build process, but just pollutes my terminal during development or build and I’m also not sure if something might break during runtime later when app is running.

It also doesn’t list React imports as problematic, but rather a react-hook-form export. I get this message multiple times:

Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').
+1
marko-hologram on Jan 20, 2024
Read more comments on GitHub
← next.js: Attempted import error: 'hls.js' does not contain a default export
next.js: Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator') →