Next or ShadCN is using useEffectEvent
Answered
Macao paper wasp posted this in #help-forum
Macao paper waspOP
When I used Switch component of ShadCN and then I build, it gives me this error
Attempted import error: 'useEffectEvent' is not exported from 'react' (imported as 'React').
Is there any solution for this? (I've tried updating versions and stuffs, I am now using Next 15.3.1)
Attempted import error: 'useEffectEvent' is not exported from 'react' (imported as 'React').
Is there any solution for this? (I've tried updating versions and stuffs, I am now using Next 15.3.1)
Answered by LuisLl
I'm usign the latest, these. And I don't have any issues, if that helps. I updated all my packages today
11 Replies
Can you show the switch component code? I'm on the latest versions and I don't get this error.
Macao paper waspOP
Yes, here it is:
"use client";
import * as React from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import { cn } from "@/lib/utils";
function Switch({
className,
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
return (
<SwitchPrimitive.Root
data-slot="switch"
className={cn(
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitive.Root>
);
}
export { Switch };
im using
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-switch": "^1.1.4",`
Asian black bear
Have you done a search through your codebase for
useEffectEvent
in an attempt to verify that you didn't accidentally attempt to call this unintentionally?Macao paper waspOP
Yeah the thing is, I never used that on my codebase, upon researching it is still in experimental stage. The only clue I have is that my radix react switch is calling it based on the log upon building it:
./node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
./node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
./node_modules/@radix-ui/react-switch/dist/index.mjs
Therefore I'm pretty much sure its on either radix or shad
./node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
./node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
./node_modules/@radix-ui/react-switch/dist/index.mjs
Therefore I'm pretty much sure its on either radix or shad
I'm usign the latest, these. And I don't have any issues, if that helps. I updated all my packages today
Answer
Macao paper waspOP
I see, there's a difference on our react-switch version, I'll try to update mine.
Delete the .next and node_modules folders? Maybe that fixes it. Sometimes works for weird issues
Macao paper waspOP
Based on their documentation, I saw that 1.1.4 is the latest version, I never thought there's already 1.2.2 version.
@LuisLl Delete the .next and node_modules folders? Maybe that fixes it. Sometimes works for weird issues
Macao paper waspOP
Yeah, I already tried that.
@LuisLl Hey, thanks a lot. I solved it now, the problem lies within the version 1.1.4. I dont know there's already 1.2.2 since it does not show it on the documentation. @Asian black bear thank you also for helping.
This case is already done. Have a great day y'all
This case is already done. Have a great day y'all