No support for non-server components in Next.js

[Johnrobmiller]

I tried setting up Cosmos with the non-server compoent version of Next.js (i.e., any Next.js verions less than 13.0), but sadly it looks like it's not possible, otherwise I wouldn't be seeing this missing dep error from a server compositing library here. Any plans to support this?

First screenshot: the error that shows the missing dependency.
Second screenshot: shows my setup

[ovidiuch]

@Johnrobmiller I'm afraid we don't have documentation for Next <13. This is because React Cosmos 6 was released after Next 13 and the revamped docs and Cosmos Next.js APIs were molded for Next 13 from the start.

That said, the react-cosmos-next package is a thin layer that connects React Cosmos to Next.js. If you have good understanding of Next.js I think you can adapt the underlying code to work with the Next.js Pages architecture. I think it's under 200 LOC total: https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-next

That said said, even though the Cosmos Next.js layer has few lines of code, it is a bit complex because it configures React Cosmos to work with Server Components. With older Next.js versions Server Components are irrelevant if I'm not mistaken, in which case following the Custom Bundler Setup is way more straightforward.

The main difference from a custom bundler setup is that instead of calling mountDomRenderer which mounts the Cosmos Renderer as a React root in your HTML file, you want to render DomFixtureLoader inside of a dummy Next.js page that you create for this purpose. This way the loaded fixtures will benefit from the Next.js context.

react-cosmos/packages/react-cosmos-dom/src/mountDomRenderer.tsx

Lines 26 to 29 in db623aa

	<DomFixtureLoader
	rendererConfig={rendererConfig}
	moduleWrappers={moduleWrappers}
	/>

Let me know if you decide to give this a try and I'm happy to answer questions.

[yocontra]

This issue actually doesn't relate to next 13 - the stacktrace is because react-cosmos-next is an ESM module and it is importing next/navigation without a file extension. You need to add transpilePackages: [ 'react-cosmos', 'react-cosmos-next' ] to your next config for this package to work on nextjs 14. Still having some other issues once that import error is fixed. Will continue to debug and open any additional tickets as necessary, but I think adding that transpile option to the README would be useful for future users.