[Bug]: Storybook 7 + Vite + Flow not working

[FezVrasta]

Describe the bug

Flow annotations in stories are not parsed, the same configuration works correctly with just Vite.

To Reproduce

https://github.com/FezVrasta/default-js

• Run yarn dev, observe everything works correctly.
• Run yarn storybook, observe it errors while parsing the Button.stories.js file.

System

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Edge: 106.0.1370.52
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/addon-interactions: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/addon-links: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/addon-mdx-gfm: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/blocks: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/react: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/react-vite: ^7.0.0-rc.10 => 7.0.0-rc.10 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[shilman]

Unfortunately, Storybook no longer supports Flow. Is there some kind of customization you can do with viteFinal to make it work?

[FezVrasta]

I'm not sure what else I can do, the Vite configuration is correct, it's something into SB that's not consuming it correctly

Do you have some special code reading the stories files?

[FezVrasta]

I see that everything seems to work as soon I replace TypeScript with Flow in the @storybook/csf-tools parser plugins.

https://github.com/storybookjs/storybook/blob/next/code/lib/csf-tools/src/babelParse.ts#L8

I wonder if Storybook could expose an option to specify Flow in place of TypeScript there? I suppose that's what the comment in the source code meant?

[pascalduez]

Hello, same issue here with Webpack.

Trying to upgrade to StoryBook 7 and it choke on Flow syntax in stories. This used to be fine in 6.x.
I'm injecting the proper Babel loader config with Flow preset etc. but as @FezVrasta spotted, it's too late.

// webpack.config.js
module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: [[require.resolve(/* our preset with Flow plugins */)]],
      },
    },
  });
};

[pascalduez]

The same thing happens with migration codemods since the TS parser is used by default.

npx storybook@latest migrate csf-2-to-3 --glob="src/**/*.stories.js"

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.9 containing PR #21859 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future