Next.js Discord

Discord Forum

React Error

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
Hello guys, im becoming mad to this error, it appears only while building the project. 

menny@menny ~/D/portfolio (develop)> npm run build

> portfolio@0.1.0 build
> next build

  ▲ Next.js 14.2.28

   Creating an optimized production build ...
 ⚠ Found lockfile missing swc dependencies, patching...
 ⚠ Lockfile was successfully patched, please run "npm install" to ensure @next/swc dependencies are downloaded
Failed to compile.

./node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
Attempted import error: 'useEffectEvent' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
./node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
./node_modules/@radix-ui/react-tooltip/dist/index.mjs
./src/components/ui/tooltip.tsx


> Build failed because of webpack errors


If need i can also paste my version of react and next. But i have no idea how to fix. Spent probably 4 hr on this.
Do you guys have any idea or have may find ur self in the same erro ?

21 Replies

Chum salmon
useEffectEvent is experimental and not stable.
https://react.dev/reference/react/experimental_useEffectEvent

It seems useEffectEvent is for React 19 but your Next.js is 14.2.28 which uses React 18 if I'm not mistaken.
So if I were you I would downgrade radix to compatible version and use something else instead of useEffectEvent.
Macao paper wasp
I think JKT thought you directly used useEffectEvent on your codebase, if you did, then try his method, but if you did not, just update your tooltip.
The radix module itself is the one using useEffectEvent.
I'm speaking at least from my perspective when I fixed that same issue.
West African LionOP
I use shacdn component like tooltip that use this methods, thus causing the error.
Macao paper wasp
Yes, shadcn is using radix.
May I know what version you are using?
West African LionOP
2.3.0 if I’m remember correctly
Macao paper wasp
The tooltip?
@Macao paper wasp The tooltip?
West African LionOP
The last one
@West African Lion 2.3.0 if I’m remember correctly
West African LionOP
Shacdn version
Macao paper wasp
Check on your package.json what version is your "@radix-ui/react-tooltip"
West African LionOP
Later I will paste my package json here
West African LionOP
{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@icons-pack/react-simple-icons": "^10.0.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@react-email/components": "^0.0.36",
    "@types/canvas-confetti": "^1.6.4",
    "@vercel/analytics": "^1.3.1",
    "canvas-confetti": "^1.9.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cobe": "^0.6.3",
    "create-email": "^0.0.34",
    "framer-motion": "^11.3.31",
    "lucide-react": "^0.437.0",
    "next": "^14.2.13",
    "next-themes": "^0.3.0",
    "prettier": "^3.3.3",
    "react": "^18",
    "react-dom": "^18",
    "react-email": "^4.0.7",
    "react-fast-marquee": "^1.6.5",
    "react-hook-form": "^7.53.0",
    "react-responsive": "^10.0.0",
    "resend": "^4.0.1-alpha.0",
    "shadcn": "^1.0.0",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.7",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}


@Macao paper wasp @Chum salmon
This is my package json.
Macao paper wasp
try updating tooltip version
npm i @radix-ui/react-tooltip@1.2.3
Macao paper wasp
@West African Lion any update?
West African LionOP
Sry I’m out of home till tomorrow. I will update u when I will try
@Macao paper wasp <@416695016094826516> any update?
West African LionOP
Everything work super fine now, Love u