Can't use Button without event handlers in Server Components

[bkostrowiecki]

• components: Button
• reactstrap version #9.2.2
• import method esm
• react version #18.2.0
• bootstrap version #5.3.3

What is happening?

Given I have a NextJS 14 app with app router
When I use <Button> component without onClick event listener attached in Server Component
Then error occures which says that I can use Events handler only in Client Component props.

What should be happening?

I should be able to use component without listeners attached in Server Components

Steps to reproduce issue

1. Create new app using NextJS 14 - next@14.1.4
2. Configure it to use app directory (usually defaults)
3. Install reactstrap
4. Change /app/page.tsx with this snippet:

import { Button } from 'reactstrap';

export default function Home() {
  return (
    <div>
      <Button>Test</Button>
    </div>
  );
}

6. Error occures

Error message in console

 ⨯ Error: Event handlers cannot be passed to Client Component props.
  <button type=... children="Test" className=... onClick={function} aria-label=...>
                                                         ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at <anonymous> (https://stackblitzstarterssr13hs-s4xa.w-credentialless-staticblitz.com/blitz.7dbe22a9.js:352:114817)
    at <anonymous> (https://stackblitzstarterssr13hs-s4xa.w-credentialless-staticblitz.com/blitz.7dbe22a9.js:352:115116)

Code

https://stackblitz.com/edit/stackblitz-starters-uy9b2t?file=app%2Fpage.tsx

[illiteratewriter]

Add 'use client' to the top of the file in which you're rendering the button. You can read the Next JS Docs for more info.