title: “Storybook Build Error” tags: [] slug: 3d362390 date: 2022-02-14 20:12:29 summary: “Fixing a Storybook build error caused by TypeScript loader order; includes error output and resolution via upgrading Storybook.”

Our team uses Storybook for a UI component library and docs. In CI, we hit the following error:

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

Looking through the official repo, a related issue/PR suggested upgrading Storybook packages: npx sb upgrade.

After upgrading, the problem was resolved.

As for the root cause, the official PR explains it: an incorrect TypeScript configuration/loader order in webpack — TS compilation needs to run before other processing.