Question 221540 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why is Next.js throwing Event handlers cannot be passed to Client Component props even though component has "use client" on top?

My bundler creates a simple React component as follows

"use client";
"use strict";var a=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var n in o)r(t,n,{get:o[n],enumerable:!0})},c=(t,o,n,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of i(o))!s.call(t,e)&&e!==n&&r(t,e,{get:()=>o[e],enumerable:!(u=b(o,e))||u.enumerable});return t};var B=(t,o,n)=>(n=t!=null?a(l(t)):{},c(o||!t||!t.__esModule?r(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(r({},"__esModule",{value:!0}),t);var x={};m(x,{Button:()=>k});module.exports=f(x);var p=B(require("react")),k=()=>p.createElement("button",{onClick:()=>alert("boop")},"Boop");0&&(module.exports={Button});
//# sourceMappingURL=Button.js.map

Although it has "use client" on top, Next.js throws error Error: Event handlers cannot be passed to Client Component props. {onClick: function, children: "Boop"}

Components actual code as requested in comments

"use client";

import * as React from "react";

export const Button = () => {
  return <button onClick={() => alert("boop")}>Boop</button>;
};
Tags:

2

Answers


  1. 0

    The error you are encountering, "Error: Event handlers cannot be passed to Client Component props," is not related to the presence of the "use client" statement in your component. Instead, it is a limitation of Next.js when using certain features of server-side rendering (SSR).

    Next.js allows you to perform server-side rendering and client-side rendering (CSR) within the same application. However, there are some limitations when it comes to handling events in client-rendered components.

    The error message you see typically occurs when you try to pass an event handler (such as onClick) to a component that is meant to be rendered on the client-side. Next.js does not support passing event handlers to components rendered on the client side because these event handlers would execute in the client’s browser environment, and the server does not have access to the client’s environment.

    To resolve this issue, you need to ensure that event handlers are only passed to components that are meant to be rendered on the server side. For example, you can conditionally render components based on whether the code is being executed on the client or server side:

    import { useEffect } from 'react';

const MyComponent = () => {
  // Check if we are on the client or server side
  const isClient = typeof window !== 'undefined';

  // Event handler
  const handleClick = () => {
    alert('boop');
  };

  // Render the component conditionally
  if (isClient) {
    // Client-side rendering
    return <div>Client-side content</div>;
  } else {
    // Server-side rendering
    return <button onClick={handleClick}>Boop</button>;
  }
};

export default MyComponent;

    By doing this, you can ensure that the event handler is only used when the component is rendered on the server-side and avoid the "Event handlers cannot be passed to Client Component props" error.

    I hope this will be helpful for you.
    Thanks for your good feedback.
    Best.

    Login or Signup to reply.
  2. 0

    I tried to simulate the error by manually copying your component code in a dummy package inside node_modules folder. I noticed that when I add "use client" on top of the index.js file that imports and exports this component, then it works just fine. I don’t know why it worked this way, but it solves the issue well.

    Have your exports like this

    - your-package
  - index.js
  - Button
    - Button.js
    - index.js <- add "use client" on top of this file. (this file will import and export the Button)

    Works only when you import like import {Button} from "your-package/Button"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search