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

cthacker-udel · 2024-01-19T14:14:13Z

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

The text was updated successfully, but these errors were encountered:

dawi · 2024-01-19T14:30:43Z

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 · 2024-01-19T14:37:07Z

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 · 2024-01-19T15:07:48Z

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.

workaround to issue introduced in next.js 14.1.0 (vercel/next.js#60890) that only seems to affect dev builds for me

tillschweneker · 2024-01-19T15:23:28Z

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

cthacker-udel · 2024-01-19T15:33:00Z

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 · 2024-01-19T17:24:37Z

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 · 2024-01-19T17:28:12Z

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 · 2024-01-19T17:35:34Z

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 · 2024-01-20T13:48:28Z

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 · 2024-01-20T15:07:20Z

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 · 2024-01-20T15:23:12Z

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 · 2024-01-20T16:14:34Z

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 · 2024-01-21T09:17:22Z

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 · 2024-01-23T01:00:21Z

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

ritchieanesco · 2024-01-23T03:23:14Z

+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 · 2024-01-23T11:18:25Z

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 · 2024-01-23T15:23:47Z

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 · 2024-01-26T23:01:33Z

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 · 2024-01-26T23:12:58Z

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 · 2024-01-26T23:18:57Z

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 · 2024-01-26T23:55:01Z

@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 · 2024-01-27T10:52:01Z

@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 · 2024-01-30T15:44:34Z

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 · 2024-01-30T16:08:02Z

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 · 2024-01-31T10:58:27Z

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 · 2024-02-01T15:47:28Z

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 · 2024-02-06T14:24:32Z

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.

### What Exclude precompiled react packages from browser layer loaders coverage. ### Why Since we're transpiling all the browser layer code now after #59569, then SWC will also compile react. But when it compiles `react.production.min.js` it gives me with the code and ESM helper inserted ```js import { _ as _type_of } from "@swc/helpers/_/_type_of"; // This is not correct var l = Symbol.for("react.element"), n = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), q = Sym bol.for("react.strict_mode"), r = Symbol.for("react.profiler"), t = Symbol.for("react.provider"), u = Symbol.f ``` This makes bundler think it's a ESM package but actually it's CJS, which converts the module into `{ default: .., __esModule }` instead of the original react module. When you're using `React.useEffect` or other API through namespace import (`import * as React from 'react'`), this will break the module exports check in bundling as the property doesn't directly attached to the module now. This PR disabled the transform for precompiled react packages now and will see the deeper issue in next-swc side later. Fixes #60890 Fixes #61185 Closes NEXT-2362

ddeisadze · 2024-02-08T16:06:32Z

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 · 2024-02-08T16:18:14Z

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

- Convert function declarations to fat arrows. - Use experimental Turbo builder in development.

vercel/next.js#60890

* chore: update ts-morph to v21.0.1 to match TS 5.3 https://github.com/dsherret/ts-morph/blob/latest/packages/ts-morph/CHANGELOG.md#2100-2023-12-02 * fix: random next error on playground vercel/next.js#60890

github-actions · 2024-02-23T00:04:03Z

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.

### What Exclude precompiled react packages from browser layer loaders coverage. ### Why Since we're transpiling all the browser layer code now after #59569, then SWC will also compile react. But when it compiles `react.production.min.js` it gives me with the code and ESM helper inserted ```js import { _ as _type_of } from "@swc/helpers/_/_type_of"; // This is not correct var l = Symbol.for("react.element"), n = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), q = Sym bol.for("react.strict_mode"), r = Symbol.for("react.profiler"), t = Symbol.for("react.provider"), u = Symbol.f ``` This makes bundler think it's a ESM package but actually it's CJS, which converts the module into `{ default: .., __esModule }` instead of the original react module. When you're using `React.useEffect` or other API through namespace import (`import * as React from 'react'`), this will break the module exports check in bundling as the property doesn't directly attached to the module now. This PR disabled the transform for precompiled react packages now and will see the deeper issue in next-swc side later. Fixes #60890 Fixes #61185 Closes NEXT-2362

cthacker-udel added the bug Issue was opened via the bug report template. label Jan 19, 2024

github-actions bot added the Module Resolution Module resolution (CJS / ESM, module resolving). label Jan 19, 2024

mikesprague added a commit to cu-cit-cloud-team/azure-openai-gpt4-chat that referenced this issue Jan 19, 2024

build(npm): add --turbo flag to dev

7f33561

workaround to issue introduced in next.js 14.1.0 (vercel/next.js#60890) that only seems to affect dev builds for me

Kiborgik mentioned this issue Jan 19, 2024

Don't work with Next.js 14.1.0 TanStack/query#6732

Closed

arvinxx mentioned this issue Jan 20, 2024

⬆️ chore: upgrade nextjs to 14.1.0 lobehub/lobe-midjourney-webui#8

Merged

7 tasks

This was referenced Jan 24, 2024

React 14.1 causes import errors when component set to 'use client' #61053

Closed

Critical bug / breaking change on 14.1.0 preventing update from latest stable 14.0.4 #61002

Closed

cthacker-udel mentioned this issue Jan 26, 2024

[Block] 14.1.0 next dev throw error Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect'). #61185

Closed

huozhi added the linear: next Confirmed issue that is tracked by the Next.js team. label Feb 5, 2024

huozhi mentioned this issue Feb 7, 2024

Fix attempted import error for react #61791

Merged

huozhi closed this as completed in #61791 Feb 7, 2024

phyllisstein added a commit to phyllisstein/ar-technical-test that referenced this issue Feb 10, 2024

Configure fixes for vercel/next.js#60890.

5e57b76

- Convert function declarations to fat arrows. - Use experimental Turbo builder in development.

christianmat mentioned this issue Feb 14, 2024

Attempted import error: 'FrigadeChecklist' is not exported from '@frigade/react' FrigadeHQ/javascript#146

Closed

astahmer added a commit to chakra-ui/panda that referenced this issue Feb 18, 2024

fix: random next error on playground

b704c77

vercel/next.js#60890

github-actions bot added the locked label Feb 23, 2024

github-actions bot locked as resolved and limited conversation to collaborators Feb 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cthacker-udel commented Jan 19, 2024 •

edited by padmaia

Loading

dawi commented Jan 19, 2024 •

edited

Loading

cthacker-udel commented Jan 19, 2024

alessandrojcm commented Jan 19, 2024

tillschweneker commented Jan 19, 2024

cthacker-udel commented Jan 19, 2024

hamizjafari commented Jan 19, 2024

cthacker-udel commented Jan 19, 2024

r34son commented Jan 19, 2024

Saarnaki commented Jan 20, 2024

marko-hologram commented Jan 20, 2024

alessandrojcm commented Jan 20, 2024

cthacker-udel commented Jan 20, 2024

fabiolnm commented Jan 21, 2024

alitas commented Jan 23, 2024

ritchieanesco commented Jan 23, 2024

azuken commented Jan 23, 2024

alessandrojcm commented Jan 23, 2024 •

edited

Loading

NanningR commented Jan 26, 2024

alessandrojcm commented Jan 26, 2024

cthacker-udel commented Jan 26, 2024 •

edited

Loading

NanningR commented Jan 26, 2024

alessandrojcm commented Jan 27, 2024

cbratschi commented Jan 30, 2024

cbratschi commented Jan 30, 2024

Nishchit14 commented Jan 31, 2024 •

edited

Loading

wesbos commented Feb 1, 2024 •

edited

Loading

engineerahkhani commented Feb 6, 2024

ddeisadze commented Feb 8, 2024

huozhi commented Feb 8, 2024

github-actions bot commented Feb 23, 2024

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

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

Comments

cthacker-udel commented Jan 19, 2024 • edited by padmaia Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

dawi commented Jan 19, 2024 • edited Loading

cthacker-udel commented Jan 19, 2024

alessandrojcm commented Jan 19, 2024

tillschweneker commented Jan 19, 2024

cthacker-udel commented Jan 19, 2024

hamizjafari commented Jan 19, 2024

cthacker-udel commented Jan 19, 2024

r34son commented Jan 19, 2024

Saarnaki commented Jan 20, 2024

marko-hologram commented Jan 20, 2024

alessandrojcm commented Jan 20, 2024

cthacker-udel commented Jan 20, 2024

fabiolnm commented Jan 21, 2024

alitas commented Jan 23, 2024

ritchieanesco commented Jan 23, 2024

azuken commented Jan 23, 2024

alessandrojcm commented Jan 23, 2024 • edited Loading

NanningR commented Jan 26, 2024

alessandrojcm commented Jan 26, 2024

cthacker-udel commented Jan 26, 2024 • edited Loading

NanningR commented Jan 26, 2024

alessandrojcm commented Jan 27, 2024

cbratschi commented Jan 30, 2024

cbratschi commented Jan 30, 2024

Nishchit14 commented Jan 31, 2024 • edited Loading

wesbos commented Feb 1, 2024 • edited Loading

engineerahkhani commented Feb 6, 2024

ddeisadze commented Feb 8, 2024

huozhi commented Feb 8, 2024

github-actions bot commented Feb 23, 2024

cthacker-udel commented Jan 19, 2024 •

edited by padmaia

Loading

dawi commented Jan 19, 2024 •

edited

Loading

alessandrojcm commented Jan 23, 2024 •

edited

Loading

cthacker-udel commented Jan 26, 2024 •

edited

Loading

Nishchit14 commented Jan 31, 2024 •

edited

Loading

wesbos commented Feb 1, 2024 •

edited

Loading