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.
