posts/publish_a_react_package_using_nextjs_as_a_base

[utterances-bot]

How to publish a React component package, using NextJS as the compiler

Although your component library may not be making use of React Server Components and the like, it can be helpful to see how the component behaves in a NextJS context.

https://blacksheepcode.com/posts/publish_a_react_package_using_nextjs_as_a_base

[sirPixieJerry]

I tried your approach but when I try to import the component, following problem occurs:

Cannot find module 'an-example-react-package-built-with-nextjs-tooling' or its corresponding type declarations.

I even downloaded your package and it is the same Problem. Did it actually work in your hosting app?

[sirPixieJerry]

there is a typo in the package.json:

"main": "dist/export.js",

it needs to be exports.js when this is fixed everything should work fine.

[dwjohnston]

@sirPixieJerry Thanks a lot. I've fixed that now. I've also updated the post so to use the exports property in the package.json, so you don't need to import via the dist folder.

[MartinSilverio]

Hi,

I've followed the steps instructed, but I get the error after trying to use the component in another project (which uses Vite). I also tried using your project to create the package, but it's the same error:

"SyntaxError: Importing binding name 'MyComponent' is not found."

Same issue with MyClientComponent.

[dwjohnston]

Hi,

I've followed the steps instructed, but I get the error after trying to use the component in another project (which uses Vite). I also tried using your project to create the package, but it's the same error:

"SyntaxError: Importing binding name 'MyComponent' is not found."

Same issue with MyClientComponent.

@MartinSilverio Hey - I'm investigating this at the moment.

I was able to reproduce the issue, but then fixed, and am now unable to reproduce it again.

I'll let you know what I find.

[dwjohnston]

@MartinSilverio I've never seen this error specifically

"SyntaxError: Importing binding name 'MyComponent' is not found."

What's the context you see this?

I've managed to reproduce a similar error with:

Attempted import error: 'MyComponent' is not exported from 'xyz-foo-bar' (imported as 'MyComponent').

Which occurs if you have type: "module" in the package.json

The other thing to be aware of is that if you are modifying the package in the node_modules of your consuming code directly, there can be caching issues if you're using next js (you'll need to delete the .next folder between changes).

[MartinSilverio]

@dwjohnston I saw the error when I was doing an npm link to test it.

A separate question, can this be doable if your component relies on external libraries or something like sass?

[dwjohnston]

@MartinSilverio

A separate question, can this be doable if your component relies on external libraries or something like sass?

If your package depends on any external JS packages, then just include them in the dependencies array.

If your package has something like some CSS built with SASS then I would compile the CSS as a build time step and copy it into the dist folder.