Extract React components to npm packages

[tobedamobe]

Hello everyone!
I've been developing with payload for about a year now and over time I've created a few components that I'd like to use in various projects. But of course then via a central npm package. So install, use the component, done.

I have already built a package and bundled it via rollup. As long as I publish and install the package via npm everything works fine. But for debugging and further expansion and testing this is of course annoying. So I would have to republish blindly every time, update the dependency in payload and then notice whether it works or not. Dumb :/

But I just can't get the "invalid hook call" error under control via yarn link. Do you have experience with it? Can someone help me? I would also be happy to post my current code or anything you need to get an overview. I'm just not at home right now ;)

[jacobsfletch]

Yeaaaaa @tobedamobe I know exactly what you are dealing with. This is very likely related to having multiple instances of React installed when running locally. The fix is to "link" your react and react-dom packages so that Yarn dedupes them. Basically, from your running demo app: cd node_modules/react && yarn link && cd ../react-dom && yarn link. Then from your component library:yarn link react react-dom.

[tobedamobe]

Thanks, but I tested this earlier. No success. My solution was to move into a deep dive to payload plugin development. It does not fix the problem, but so I can go on ;)

[jacobsfletch]

You can verify that your setup is correct by navigating to your consuming app's node_modules directory, and seeing if it is properly aliased to the global yarn node_modules which is located elsewhere in your machine. I used VS Code, which displays a small "alias" icon so I can easily discern which packages have symlinks.