I've been working on a React-based component library and I'm encountering an issue when trying to integrate it into a Next.js application. I'm hoping someone here might have insights or suggestions on how to resolve this. Here's the breakdown of my setup and the problem I'm facing …
I aim to build a small React-based package using tsup that can be installed and used in a Next.js app.
I've configured tsup successfully and it produces an ESM build of my library. The library functions perfectly (sort of) and has been tested within a Storybook environment.
After installing the library into my Next.js app and attempting to import it, I encounter the following runtime error:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState')
This error suggests an issue with React's useState hook, but it's unclear why this is happening, especially since the library works flawlessly in Storybook. Printing {React.version} in the component works fine, for some reason whereas useEffect causes the same error as useState.
Steps to Reproduce:
For anyone willing to take a closer look, you can find a minimal reproducible example and steps how to reproduce the issue here: wiremore/library-issue
Any insights into why this error might be occurring or how to resolve it would be greatly appreciated. I'm curious if it's related to the way tsup is building the package or a specific consideration I might have missed for Next.js.
Thanks in advance for your help!