Story List Renders, But Clicked Stories Don't (Solved, Messily)

[machineghost]

Describe the bug

I just started using Ladle, after some frustration with that other library (which I will not name). After following all of the setup instructions, I saw this:

Ladle recognized my stories, but couldn't render them, not even a dumbed down one:

export const TitleOnly: Story = () => <h1>TEST</h1>;

Looking at the browser errors, I saw two key errors (not relevant to my bug, but I'm mentioning them as you probably want to clean them up):

source.js:59 A props object containing a "key" prop is being spread into JSX
source.js:51 A props object containing a "key" prop is being spread into JSX:

More importantly though, I had this error:

react-dom_client.js?v=a2614569:5613 ReferenceError: process is not defined
at node_modules/next/dist/client/has-base-path.js (next_link.js?v=a2614569:426:20)
at __require (chunk-V4OQ3NZ2.js?v=a2614569:11:50)
at node_modules/next/dist/shared/lib/router/utils/is-local-url.js (next_link.js?v=a2614569:452:24)
at __require (chunk-V4OQ3NZ2.js?v=a2614569:11:50)
at node_modules/next/dist/client/resolve-href.js (next_link.js?v=a2614569:1535:23)
at __require (chunk-V4OQ3NZ2.js?v=a2614569:11:50)
at node_modules/next/dist/client/link.js (next_link.js?v=a2614569:1961:24)
at __require (chunk-V4OQ3NZ2.js?v=a2614569:11:50)
at node_modules/next/link.js (next_link.js?v=a2614569:2285:22)
at __require (chunk-V4OQ3NZ2.js?v=a2614569:11:50)

After wasting close to an hour debugging everything, I finally found the answer: Ladle hates Next.js! 😜

Fixes

If you look in the docs under setup, configuration, or anywhere else logical, there are no docs whatsoever for Next.js. Instead, they are hidden (all by themself, under a category that seems to exist for the sole purpose of hiding them) ... under "Recipes".

I see two bugs here:

1. Next documentation should be listed under "Getting Started" or "Configuration" (or maybe something like "Frameworks" ... right after "Getting Started"). You do want new Next/Ladle users to be able to use their new toy when they first unwrap it ... not after an hour of debugging and finding some GitHub issue (which was easier to discover than the official Next documentation page) ... right?

2. As a Next user, the solution to the problem (ie. having to have a config file for an entirely different framework, not inside Ladle but inside your project root folder) is really gross. It's like seeing some .Net config inside a Python project or something.

I get that you want Ladle to be able import root-relative, to keep imports working, but couldn't you use Vite's capabilities to achieve that? Vite lets you serve from another folder (with an extra CLI arg), and when you do it looks for the config in that folder. From https://vite.dev/guide/#index-html-and-project-root

Running vite starts the dev server using the current working directory as root. You can specify an alternative root with vite serve some/sub/dir. Note that Vite will also resolve its config file (i.e. vite.config.js) inside the project root, so you'll need to move it if the root is changed.

By combining that with Vite's resolve/alias config, or (as that page suggests) possibly a custom https://vite.dev/guide/api-plugin.html, you should be able to:

• keep the vite config in the Ladle folder (not in people's root)
• start Vite from the Ladle folder
• use resolve path trickery to alias .. back into the path, so all imports continue to work.

[machineghost]

P.S. If desired I'll happily submit a PR to move the Next page (or at the very least get rid of the default hiding of documentation pages in the menu, so a new Ladle user has some way of knowing Next config exists).

I'd also be happy to assist however I can with the Vite stuff, but A) I'm no Vite expert, and B) it's pretty integral to your project, so I'd imagine a maintainer would want to handle it.