Can't render a client component in Next.js

I have a client component defined like so:

@@directive("'use client';")

let wait = ms => Promise.make((res, _) => setTimeout(() => res(), ms)->ignore)

module Component = {
  @react.component
  let make = () => {
    let (state, setState) = React.useState(() => 0)
    <div>
      {React.string("dd")}
      <button onClick={_ => setState(c => c + 1)}> {state->React.int} </button>
    </div>
  }
}

When I render this inside of a server component I get an error:

Error: Cannot access Component.make on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Is there a solution for this?

1 Like