Cannot find module 'node_modules/react/jsx-runtime' imported from 'node_modules/@tw-classed/react/dist/index.mjs' when used from a component library

[searchableguy]

Discussed in #76

I use tw-classed in a component library package which is built by vite. I'm facing this error when I try to import the library in a nextjs app if tw-classed/react is listed as a dependency.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Work/unlock/node_modules/react/jsx-runtime' imported from /Work/unlock/node_modules/@tw-classed/react/dist/index.mjs
Did you mean to import react/jsx-runtime.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:837:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

After looking into it, it seems to be react 17 issue facebook/create-react-app#11769 facebook/react#20235 which was apparently fixed in 18. I upgraded to 18 in our next app but that didn't resolve anything so my guess there is also something with nextjs that affects this. vercel/next.js#27977

I've not been able to find a way to work around this so I decided to create an issue. Feel free to close this if it's relevant.

[sannajammeh]

Could you possibly provide a minimal reproduction? I haven't faced this issue in the compatibility testing I did.

[sannajammeh]

Hello :)

I've tried to reproduce this. Published a component lib to npm using tw-classed and export Button component. Then I installed this lib first in a Next.js react-18 app, and a Vite react 17 app.

https://www.npmjs.com/package/@chiefkoshi/test-tw-compat?activeTab=explore

It works in both for me. Here is the code: https://github.com/sannajammeh/test-lib-compat
cd into either vite-react or next-playground folder and install + run build or dev script.

This is most likely related to your exports field and emitted modules in dist of the library.

[sannajammeh]

Hi,

As I haven't been able to reproduce this and received no reproduction example I'm going to close this for now.

Hopefully Unlock has figured it out! If not feel free to reopen at any time.