Issues with TS/Vite after Storybook 8 upgrade

[Thenlie]

Summary

After upgrading to the latest version of Storybook my project fails to load. The local site says "Failed to fetch dynamically imported module: http://localhost:6006/.storybook/preview.ts". The output from the terminal is posted below.

I have found some similar posts however none have a solution that works for me.
#17589
#27704

I have tried updating/adding some babel plugins suggested here.

You can find my entire project in the reproduction which includes all versions and storybook files. Please let me know if I am not providing any useful information and I will happily update the post.

Additional information

Terminal output

➜  Streamability git:(develop) ✗ nr storybook

> [email protected] storybook
> storybook dev -p 6006

@storybook/cli v8.1.10

info => Starting manager..
info => Starting preview..
info Using tsconfig paths for react-docgen
╭─────────────────────────────────────────────────╮
│                                                 │
│   Storybook 8.1.10 for react-vite started       │
│   230 ms for manager and 789 ms for preview     │
│                                                 │
│    Local:            http://localhost:6006/     │
│    On your network:  http://10.0.0.118:6006/    │
│                                                 │
╰─────────────────────────────────────────────────╯
7:18:08 PM [vite] Internal server error: /Users/leithen/Code/typescript/Streamability/.storybook/preview.ts: Unexpected token, expected "from" (1:12)

> 1 | import type { Preview } from '@storybook/react';
    |             ^
  2 | import { withThemeFromJSXProvider } from '@storybook/addon-themes';
  3 | import { ThemeProvider } from '@mui/system';
  4 | import { lightTheme, darkTheme } from '../src/theme';
  Plugin: storybook:react-docgen-plugin
  File: /Users/leithen/Code/typescript/Streamability/.storybook/preview.ts:1:12
  1  |  import type { Preview } from '@storybook/react';
     |              ^
  2  |  import { withThemeFromJSXProvider } from '@storybook/addon-themes';
  3  |  import { ThemeProvider } from '@mui/system';
      at constructor (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:351:19)
      at Parser.raise (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:3233:19)
      at Parser.unexpected (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:3253:16)
      at Parser.expectContextual (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:3536:12)
      at Parser.parseImportSpecifiersAndAfter (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:13694:10)
      at Parser.parseImport (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:13686:17)
      at Parser.parseStatementContent (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12331:27)
      at Parser.parseStatementLike (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12223:17)
      at Parser.parseModuleItem (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12200:17)
      at Parser.parseBlockOrModuleBlockBody (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12780:36)
      at Parser.parseBlockBody (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12773:10)
      at Parser.parseProgram (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12100:10)
      at Parser.parseTopLevel (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:12090:25)
      at Parser.parse (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:13904:10)
      at parse (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/parser/lib/index.js:13925:26)
      at parser (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/core/lib/parser/index.js:41:34)
      at parser.next (<anonymous>)
      at parse (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/core/lib/parse.js:25:37)
      at parse.next (<anonymous>)
      at evaluateSync (/Users/leithen/Code/typescript/Streamability/node_modules/gensync/index.js:251:28)
      at sync (/Users/leithen/Code/typescript/Streamability/node_modules/gensync/index.js:89:14)
      at stopHiding - secret - don't use this - v1 (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
      at parseSync (/Users/leithen/Code/typescript/Streamability/node_modules/@babel/core/lib/parse.js:40:72)
      at babelParser (/Users/leithen/Code/typescript/Streamability/node_modules/react-docgen/dist/babelParser.js:78:41)
      at parse (/Users/leithen/Code/typescript/Streamability/node_modules/react-docgen/dist/parse.js:51:46)
      at defaultParse (/Users/leithen/Code/typescript/Streamability/node_modules/react-docgen/dist/main.js:55:35)
      at TransformPluginContext.transform (/Users/leithen/Code/typescript/Streamability/node_modules/@storybook/react-vite/dist/preset.js:1:4173)
      at PluginContainer.transform (file:///Users/leithen/Code/typescript/Streamability/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49545:19)
      at async loadAndTransform (file:///Users/leithen/Code/typescript/Streamability/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:52366:27)

Create a reproduction

https://github.com/Thenlie/Streamability/tree/storybook-fix

[shilman]

Thanks for your patience. Here's what's going on:

• In Storybook 8 we switched to using react-docgen for component analysis by default
• react-docgen takes cues from your babelrc if you have one
• your project has a babelrc and it is not configured to support TS, so it fails when react-docgen tries to process .storybook/preview.ts

To solve this problem, you can:

• Set typescript.reactDocgen to react-docgen-typescript or false (I confirmed both work)
• Fix your babelrc to handle TypeScript (did not confirm)

It's also possible there's a better fix in Storybook's core, e.g. to make these errors show a warning rather than a hard error.

[Thenlie]

Thank you very much! Without any changes to my babelrc, adding the reactDocgen property to my storybook config resolved this error.

I then updated my babelrc to include @babel/preset-typescript. This did not cause any further issue.

[minuz]

Thanks for the solution!! After a couple hrs searching, this was the answer that finally fixed it!

In my case, I don't have a babelrc, and on main.ts, this is what I needed add:
Btw, I have a monorepo with NX.

  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      tsconfigPath: './apps/dawn-ui/tsconfig.storybook.json'
    },
  },

[Minf97]

Thanks! I have the same problem