[Bug]: Can't transpile TypeScript files in PNPM monorepo

[eden-lane]

Describe the bug

I'm trying to setup a monorepo with storybook in the root but it fails with an error:

ModuleBuildError: Module build failed (from ./node_modules/.pnpm/babel-loader@9.1.2_2bpkfvz2mezbew2j5yjox7n6pu/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/eden_lane/Projects/week-editor/packages/core/src/WeekEditor.tsx: Missing semicolon. (6:4)

   4 | import { Editable, Slate, withReact } from 'slate-react';
   5 |
 > 6 | type Props = {
     |     ^

I've used pnpm dlx storybook init command to initialize storybook

To Reproduce

https://github.com/getweek/week-editor

System

No response

Additional context

No response

[kasperpeulen]

Given your commit history, it only affects webpack monorepo projects, and not vite monorepo projects.

@ndelangen I seems like the babelrc is not picked up. Any ideas here?

[eden-lane]

Yep, I've managed to start storybook by migrating to vite, no luck with webpack.

[ndelangen]

Our babel config generation script does not support monorepos, because babel config generation is complex and loaded with edge cases.

https://babeljs.io/docs/configuration
https://babeljs.io/docs/config-files
https://babeljs.io/docs/config-files#monorepos

I believe that @kasperpeulen found that if you rename the .babelrc.json to babel.config.json it would work.

[Flcwl]

Our babel config generation script does not support monorepos, because babel config generation is complex and loaded with edge cases.

https://babeljs.io/docs/configuration https://babeljs.io/docs/config-files https://babeljs.io/docs/config-files#monorepos

I believe that @kasperpeulen found that if you rename the .babelrc.json to babel.config.json it would work.

@kasperpeulen Hello, I hope know why support the .babelrc.json or .babelrc.js or .babelrc file? only support babel.config.json ?

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.4 containing PR #22052 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.5 containing PR #22052 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[ndelangen]

@Flcwl I'm not understanding your question, I'm sorry.

The file we generate to get a babel config set up, isn't feature complete, because it's incredibly hard to generate the exact correct config for everyone.

Therefore it will generate what will work for most.
If it doesn't work for you, please set up babel config correctly yourself, following the babel config documentation, and storybook will pick up your babel config.