StoryBook打包报错

发表于 更新于 本文字数： 682 阅读时长 ≈ 1 分钟
本文是作者对StoryBook打包报错的介绍，包括StoryBook打包报错的优势、实现细节、相关资料等，这些步骤可以帮助作者提高StoryBook打包报错的效率。

团队最近的项目使用SB进行UI组件库开发及文档维护，在CI部署时，遇到报错如下

1
2
3
4
5
6
7
8
9
10
11
vendors~main.54994c12.iframe.bundle.js:2 Unexpected error while loading ./button.stories.tsx: Module parse failed: Unexpected token (22:2)
File was processed with these loaders:

 * ../../../cache/node_modules/@storybook/source-loader/dist/cjs/index.js
   You may need an additional loader to handle the result of these loaders.
   |     backgroundColor: { control: 'color' },
   |   },

> } as ComponentMeta<typeof Button>;
> | 
> | // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

查询官方repo发现有个问题描述类似，解决方案是升级SB相关包npx sb upgrade

按照提示进行了下包升级，果然问题解决。

但该问题原因如何？查看下官方PR。

原因是Webpack下关于TS的配置有错，即TS的编译需要在其它处理之前进行。