Story discovering failed: [ConfigError: [BABEL] unknown file: Preset /* your preset */ requires a filename to be set when babel is called directly

[viddo]

I could work around this problem by moving my babel config out of the root dir and reference it by the other tooling that needs it (e.g. Webpack, Jest, …). I don't expect a fix per se, but reporting nevertheless in case someone else runs into this issue. :)

---

Describe the bug

Adding MDX file with project that have babel config fails upon startup like so:

   ╭───────────────────────────────────────────────────╮
   │                                                   │
   │   🥄 Ladle.dev served at http://localhost:4123/   │
   │                                                   │
   ╰───────────────────────────────────────────────────╯


Story discovering failed:

ConfigError: [BABEL] unknown file: Preset /* your preset */ requires a filename to be set when babel is called directly,

babel.transformSync(code, { filename: 'file.ts', presets: [/* your preset */] });

See https://babeljs.io/docs/en/options#filename for more information.
    at new ConfigError (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/errors/config-error.js:10:5)
    at validateIfOptionNeedsFilename (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:265:11)
    at eval (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:275:103)
    at validatePreset (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:275:76)
    at loadPresetDescriptor (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:293:3)
    at recursePresetDescriptors (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:77:31)
    at eval (/home/projects/ladle-o7lxfz/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/full.js:156:21)

More info: https://ladle.dev/docs/stories#limitations

Reproduction

1. Create a new Stackblitz
2. Add babel.config.json in the root with contents:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. Add/install aforementioned deps

pnpm add @babel/preset-env @babel/preset-react @babel/preset-typescript

4. Add a src/whatever.stories.mdx file, contents doesn't matter
5. Restart dev server pnpm install && pnpm run dev

Environment

• OS: Mac OS Sonoma 14.6.1 (23G93)
• Browser: Brave Version 1.70.126 Chromium: 129.0.6668.100 (Official Build) (arm64)
• Version: Ladle latest stable, 4.1.2 at time of writing

[tajo]

fyi: by default, Ladle doesn't use babel anymore (we use swc plugin instead)