`babelModeV7` should use `babel.config.json` at monorepo root

(Note this is now a bug report, not a feature request.)

Is your feature request related to a problem? Please describe I’ve implemented Storybook at /packages/ui/.storybook in a monorepo, and it took me a while to realize babelModeV7 doesn’t use /babel.config.json at the monorepo root.

This causes strange failures, like TypeScript files failing due to Flow parse errors.

Describe the solution you’d like

• Make Storybook use the monorepo Babel config.
• Consider failing if no Babel config is found, rather than using a strange default that is completely different from v6 behaviour.

Describe alternatives you’ve considered Creating a local .babelrc.json does not work, because it does not apply to files in other packages, which are then parsed using a weird partial config coming from somewhere inside Storybook.

Are you able to assist to bring the feature to reality? Possibly?

Additional context Disabling babelModeV7 works around the issue for now, but given it becomes the standard in v7, and given the stated intent is for Storybook to use our project’s Babel config, I’d like to figure out how to help make this happen.

Reproduction https://github.com/aaronadamsCA/storybook-issue-17398

Try running Storybook in packages/ui/ and it will fail with parse errors:

ModuleBuildError: Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: /workspaces/storybook-babel-issue/packages/ui/src/ButtonStack/ButtonStack.stories.tsx: Missing semicolon. (6:50)

  4 | import { ButtonStack as Component } from "./ButtonStack";
  5 |
> 6 | const VARIANTS = ["contained", "outlined", "text"] as const;
    |                                                   ^
  7 |
  8 | const meta: ComponentMeta<typeof Component> = {
  9 |   component: Component,
    at instantiate (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
    at toParseError (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error.js:58:12)
    at Object.raise (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
    at Object.semicolon (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/util.js:146:10)
    at Object.parseVarStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:904:10)
    at Object.parseStatementContent (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:391:21)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:1926:26)
    at Object.parseBlockOrModuleBlockBody (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:1082:25)
    at Object.parseBlockBody (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:1058:10)
    at processResult (/workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:758:19)
    at /workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:860:5
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /workspaces/storybook-babel-issue/node_modules/babel-loader/lib/index.js:59:103
ModuleBuildError: Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: /workspaces/storybook-babel-issue/packages/mui-theme-base/src/index.ts: Only declares and type imports are allowed inside declare module. (10:2)

   8 |
   9 | declare module "@mui/material/styles" {
> 10 |   interface TypographyVariantsOptions {
     |   ^
  11 |     systemFontFamily?: TypographyStyleOptions["fontFamily"];
  12 |   }
  13 |
    at instantiate (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
    at toParseError (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error.js:58:12)
    at Object.raise (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
    at Object.expectContextual (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/util.js:108:20)
    at Object.flowParseDeclareModule (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:520:16)
    at Object.flowParseDeclare (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:469:23)
    at Object.parseExpressionStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:1948:25)
    at Object.parseStatementContent (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:477:19)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:1926:26)
    at processResult (/workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:758:19)
    at /workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:860:5
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /workspaces/storybook-babel-issue/node_modules/babel-loader/lib/index.js:59:103

Try renaming .babelrc.json.example to .babelrc.json and it will still fail with parse errors, because the local Babel configuration does not apply to files in other monorepo packages:

ModuleBuildError: Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: /workspaces/storybook-babel-issue/packages/mui-theme-base/src/index.ts: Only declares and type imports are allowed inside declare module. (10:2)

   8 |
   9 | declare module "@mui/material/styles" {
> 10 |   interface TypographyVariantsOptions {
     |   ^
  11 |     systemFontFamily?: TypographyStyleOptions["fontFamily"];
  12 |   }
  13 |
    at instantiate (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
    at toParseError (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parse-error.js:58:12)
    at Object.raise (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
    at Object.expectContextual (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/util.js:108:20)
    at Object.flowParseDeclareModule (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:520:16)
    at Object.flowParseDeclare (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:469:23)
    at Object.parseExpressionStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:1948:25)
    at Object.parseStatementContent (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:477:19)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Object.parseStatement (/workspaces/storybook-babel-issue/node_modules/@babel/parser/src/plugins/flow/index.js:1926:26)
    at processResult (/workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:758:19)
    at /workspaces/storybook-babel-issue/node_modules/webpack/lib/NormalModule.js:860:5
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/workspaces/storybook-babel-issue/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /workspaces/storybook-babel-issue/node_modules/babel-loader/lib/index.js:59:103

[aaronadamsCA]

I am re-debugging this now and I’m not completely sure my original report was accurate.

I’ll close this until I’m sure there’s an issue, in which case I’ll reopen it.

[aaronadamsCA]

Re-opened with a reproduction! I seem to be experiencing multiple issues and it took a while to isolate this one, but the repro is now compact and solid.