Cannot run in Next.js

[adrianmcli]

When running the simple hello world example from the README, I am getting compile errors from Next.js:

I believe it might be internally using an old useState function or something. The only code I added was:

  const { value } = useCountUp({
    isCounting: true,
    end: 1234,
    duration: 3.2,
  })

CodeSandbox Repro: https://codesandbox.io/p/sandbox/elated-wu-mbj41e

[Willem-Jaap]

useState does not work in server components, wrap the component in a component with 'use client' at the top of the file.

[vydimitrov]

Yup, @Willem-Jaap is right. You can check it here

[Willem-Jaap]

I haven't looked at the code of this project too much, but I think you can add the 'use client' directive to the package itself.
This would improve the developer expercience and remove confusion.

ESBuild has a banner feature which can be used for this: https://esbuild.github.io/api/#banner

[sammaji]

@Willem-Jaap can we do that?

I think the hook is meant to be used in both react and next projects. By adding the "use client" directive, it won't work for react projects. One thing that can be done is to create two separate hooks: one for react and one for next, but then you would have to use the react-based-hook for older versions of next (<=12) and the next-based-hook for newer ones. That's not a good idea I think.

Its best to just mention it in the docs.

[Willem-Jaap]

"use client" is not bound to Next.js but to React Server Components: https://react.dev/reference/react/use-client
I don't know if this directive has any effect on older code

[sammaji]

I didn't know that! Thanks

[vydimitrov]

Closing due to inactivity.