ExternalDirs not building or compiling properly inside Nextjs

[david-j-davis]

For packages such as ui-lib, I'm having trouble getting my nextjs app to import an external package like yours as it seems to not compile the jsx correctly. My tsconfigs are set up like yours. All of my external packages are .ts, .tsx.

Is it the case that I need to build the external package first before importing into Nextjs? Aka running yarn run build in the package directory so dist exists before the import works properly?

[belgattitude]

This example does not require a pre build step. Files are imported like they would exist in the app thx to a 3 little tricks: the workspace: protocol in yarn where you explicitly state the dependency. The tsconfig paths and the externalDir in nextjs config.

I would be sure those 3 points are enabled first. I'm in my phone so it's difficult to make link but you'll find in the readme or in previous discussions about this.

I'm not yet sure about the reason of your issue, but if you're using emotion in the ui package. The app must enable few things in the babel config. And you'll probably have to check the jsxFactories in tsconfig too. Eventually check the _document.tsx and _app.tsx if you're relying on ssr hydration and material-ui for example.

That's all I can think of today. Let me know if it help with the issue. Gluing the ui-lib is always a bit tricky.