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

[cthacker-udel]

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

• [X] 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

[dawi]

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.

[cthacker-udel]

That is interesting, it's working for me when I do that as well, just wish the build would work so I could deploy it 😢 Cool find though :) will atleast be able to work on it locally for the time being.

[alessandrojcm]

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.

[tillschweneker]

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

[cthacker-udel]

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.

Same here, as soon as I upgraded it's refused to work, lists several different react imports in the error logs like what you said.

[hamizjafari]

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

[cthacker-udel]

I don't have a browserslist config in my package.json :/ I tried removing .browserslistrc from the root folder and still nothing, same issue :(

[r34son]

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

It helped, thanks!

[Saarnaki]

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.

[marko-hologram]

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').

[alessandrojcm]

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.

[cthacker-udel]

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.

Likewise, one of the discoveries I also came across while I was trying to figure it out.

[fabiolnm]

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

Solved to me, thanks!

[alitas]

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

[ritchieanesco]

+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.

[azuken]

Going off #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

Worked for me thanks, delete package.json definition did nothing.

[alessandrojcm]

Going off #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

This did not work for me

[NanningR]

Going off #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

This did not work for me

Make sure you delete your .next folder before running "run dev" again

[alessandrojcm]

Going off #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

This did not work for me

Make sure you delete your .next folder before running "run dev" again

The app is running inside a docker container so there was no next folder to begin with

[cthacker-udel]

Going off #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

This did not work for me

Make sure you delete your .next folder before running "run dev" again

Works for me when I do that, after clearing out the .next folder between runs. For example

Old browserslist && no .next directory npm run dev breaks with similar error

--- delete .next directory New browserslist && no .next directory npm run dev succeeds

Although I don't know how this bug was introduced, and if browserslistrc is even the cause, or just working because it doesn't break in some way; I just have a black box understanding of what next dev does behind the scenes. I'm unsure if this is necessarily a fix for this bug, because there are others with no .browserslistrc or no .next folder (example above) that are still running into the issue. I do appreciate the temporary solution, at least for me, for the time-being, thank you.

I tried the latest canary with it last night, with the original browserslist, and ran into the same error, so I'm going to still count it as broken.

[NanningR]

@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

[alessandrojcm]

@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.

[cbratschi]

I have this issue in all my routes, once in Swiper and once in a OIDC client component. This happened since upgrading to 14.1 and all attempts to workaround it failed (browserlist, deleting .next folder, modifying the code). Not using turbo.

With a browserlist config file Webpack fails right away:

Error: For the selected environment is no default script chunk format available:

[cbratschi]

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.

[Nishchit14]

I just found the fix, In my case I was using one valtio function in utils.ts file which was used somewhere in the server side api.

Rule is if you're using any client side library then make sure that you're not using its client apis/functions directly or indirectly on server routes or server actions.

[wesbos]

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.

[engineerahkhani]

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

Thank you, worked for me after removing .next and node_modules and running yarn again.

[ddeisadze]

I am getting a similar error upgrading to 14.1, the error comes from chakra. I have tried everything except upgrading to turbo. Any ideas?

 ⨯ ../../node_modules/@chakra-ui/accordion/dist/chunk-CRBMUVJA.mjs
Attempted import error: 'useMemo' is not exported from 'react' (imported as 'useMemo').

Import trace for requested module:
../../node_modules/@chakra-ui/accordion/dist/chunk-CRBMUVJA.mjs
../../node_modules/@chakra-ui/accordion/dist/index.mjs
../../node_modules/@chakra-ui/react/dist/index.mjs
./src/app/providers.tsx

[huozhi]

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

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.