Ladle fails to launch with react-router in "framework" mode

[AtiX]

Describe the bug

When the repository is using react-router in framework mode, ladle fails to serve or build:

❯ ladle serve
Error: Could not find a root route module in the app directory as "app/root.tsx"
    at createConfigLoader (/home/projects/ladle-jkx1rg7v/node_modules/.pnpm/@react-router+dev@7.5.3_@types+node@20.12.13_react-router@7.5.3_typescript@5.4.5_vite@6.3.4/node_modules/@react-router/dev/dist/vite.js:516:11)
Error: Could not find a root route module in the app directory as "app/root.tsx"
    at createConfigLoader (/home/projects/ladle-jkx1rg7v/node_modules/.pnpm/@react-router+dev@7.5.3_@types+node@20.12.13_react-router@7.5.3_typescript@5.4.5_vite@6.3.4/node_modules/@react-router/dev/dist/vite.js:516:11)

Reproduction

Reproduction example: https://stackblitz.com/edit/ladle-jkx1rg7v?file=app%2Froot.tsx - try running ladle serve

The issue seems to be that during startup vite and the reactRouter() plugin search for (1) routes and (2) the react-router.config files in the root directory. However, root is set to /Users/.../node_modules/@ladle/react/typings-for-build/app and not the actual project directory.

Code extract (vite.js):

async function createConfigLoader({
  rootDirectory: root,
  watch: watch2
}) {
// Is set to "/Users/.../node_modules/@ladle/react/typings-for-build/app"
  root = root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
  let viteNodeContext = await createContext({
    root,
    mode: watch2 ? "development" : "production"
  });
// File cannot be found
  let reactRouterConfigFile = findEntry(root, "react-router.config", {
    absolute: true
  });
  let getConfig = () => resolveConfig({ root, viteNodeContext, reactRouterConfigFile });
  let appDirectory;
  let initialConfigResult = await getConfig();
// Config is not okay, error is thrown
  if (!initialConfigResult.ok) {
    throw new Error(initialConfigResult.error);
  }
...
}

Environment

• OS: macOS 15.4.1
• Node 22.14

[stuikomma]

You probably don't need react router in your stories, so you can conditionally disable the plugin in your vite config as a workaround. Ladle appears to set a few values in the environment which we can use to detect that we are running in story mode:

process.env = {
  npm_lifecycle_event: 'ladle',
  VITE_LADLE_APP_ID: '<some hex value>',
  VITE_PUBLIC_LADLE_THEME: 'light'
}

So you can update your vite config like this:

// vite.config.ts
import { reactRouter } from '@react-router/dev/vite';

export default {
  plugins: [
    !process.env.VITE_LADLE_APP_ID && reactRouter(),
    // keep your other plugins as before
  ]
  // rest of your config
}