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

tianyingchun · 2024-01-26T06:25:38Z

Link to the code that reproduces this issue

https://github.com/tianyingchun/next-issue

To Reproduce

yarn install
yarn dev

Current vs. Expected behavior

throw error in next dev mode

- info Server env(s) validation successful:
- info Server env(s) validation successful:
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in 4s
 ✓ Compiled /src/middleware in 91ms
 ✓ Compiled (148 modules)
 ○ Compiling /[locale]/[...rest] ...
 ⨯ ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').

Import trace for requested module:
./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
./node_modules/@mui/base/Unstable_Popup/Popup.js
./node_modules/@mui/base/Unstable_Popup/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/material/Popover/Popover.js
./node_modules/@mui/material/Popover/index.js
__barrel_optimize__?names=Popover!=!./node_modules/@mui/material/index.js
./node_modules/material-ui-popup-state/es/HoverPopover.mjs
./src/components/LocaleSwitcher/LocaleSwitcher.tsx
 ⨯ ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').

Import trace for requested module:
./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
./node_modules/@mui/base/Unstable_Popup/Popup.js
./node_modules/@mui/base/Unstable_Popup/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/material/Popover/Popover.js
./node_modules/@mui/material/Popover/index.js
__barrel_optimize__?names=Popover!=!./node_modules/@mui/material/index.js
./node_modules/material-ui-popup-state/es/HoverPopover.mjs
./src/components/LocaleSwitcher/LocaleSwitcher.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.

yarn build works fine.

Provide environment information

- info Server env(s) validation successful:

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:34 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8103
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 4.0.2
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router

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

next dev (local)

Additional context

next dev can works correct on "next": "14.0.4",
next dev can not works correct on "next": "14.1.0",
next build can works correct both on 14.0.4 and 14.1.0****

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

cthacker-udel · 2024-01-26T23:30:45Z

Very similar bug: #60890

zamarawka · 2024-01-27T12:37:41Z

I encountered exactly the same error after update on 14.1.0.
Every import from react with error.

Don't understand how, but

rm -rf .next

with remove browserList from package.json helps to run app..

limpep · 2024-01-28T21:24:05Z

Getting the same error

NewEditOfficial · 2024-02-04T08:41:32Z

I encountered exactly the same error after update on 14.1.0. Every import from react with error.

Don't understand how, but
rm -rf .next
with remove browserList from package.json helps to run app..

I was getting same error this tip resolved it temporarily until its fixed.👍

next dev --turbo (i was required to changed package.json scripts >> dev to make it work)

gaojude · 2024-02-06T18:43:02Z

I encountered exactly the same error after update on 14.1.0. Every import from react with error.

Don't understand how, but
rm -rf .next
with remove browserList from package.json helps to run app..

what if i do need this field for other purposes? is there a way for next.js build to not look at the browserList field even when its there?

mrksph · 2024-02-08T21:17:55Z

This is a joke, how do you suggest to upgrade to the latest version with stupid errors like this? Thank god all I have to do is delete a .next folder and a property from package.json.... When will this fix be released? @huozhi ?

Btw, thanks for the work around @zamarawka

huozhi · 2024-02-08T22:41:22Z

We had a fix in #61791 and released in v14.1.1-canary.44 for this issue, please upgrade to any canary versions above that one

Eunkyung-Son · 2024-02-21T03:37:35Z

This error occurs during build time on pages using the edge runtime.
Removing the edge runtime and using the node runtime resolves this error.

Do you have any solution for this issue?

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

rakibatomnixima · 2024-02-29T05:25:46Z

still having this error on latest canary build on edge runtime

github-actions · 2024-03-14T12:03:47Z

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.

tianyingchun added the bug Issue was opened via the bug report template. label Jan 26, 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

huozhi closed this as completed in ed3ee38 Feb 7, 2024

jrjake mentioned this issue Feb 12, 2024

[material-ui] Issues with NextJS 14.1 mui/material-ui#40725

Closed

github-actions bot added the locked label Mar 14, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tianyingchun commented Jan 26, 2024

cthacker-udel commented Jan 26, 2024

zamarawka commented Jan 27, 2024 •

edited

Loading

limpep commented Jan 28, 2024

NewEditOfficial commented Feb 4, 2024 •

edited

Loading

gaojude commented Feb 6, 2024

mrksph commented Feb 8, 2024 •

edited

Loading

huozhi commented Feb 8, 2024

Eunkyung-Son commented Feb 21, 2024 •

edited

Loading

rakibatomnixima commented Feb 29, 2024

github-actions bot commented Mar 14, 2024

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

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

Comments

tianyingchun commented Jan 26, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

cthacker-udel commented Jan 26, 2024

zamarawka commented Jan 27, 2024 • edited Loading

limpep commented Jan 28, 2024

NewEditOfficial commented Feb 4, 2024 • edited Loading

gaojude commented Feb 6, 2024

mrksph commented Feb 8, 2024 • edited Loading

huozhi commented Feb 8, 2024

Eunkyung-Son commented Feb 21, 2024 • edited Loading

rakibatomnixima commented Feb 29, 2024

github-actions bot commented Mar 14, 2024

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

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

zamarawka commented Jan 27, 2024 •

edited

Loading

NewEditOfficial commented Feb 4, 2024 •

edited

Loading

mrksph commented Feb 8, 2024 •

edited

Loading

Eunkyung-Son commented Feb 21, 2024 •

edited

Loading