storybookjs/storybook
View on GitHub[Bug]: @storybook/web-components-vite `RollupError: Unexpected token` in mdx
Open
#23,098 opened on Jun 15, 2023
bugbuilder-vitehelp wantedmdx
Repository metrics
- Stars
- (89,909 stars)
- PR merge metrics
- (Avg merge 7d 22h) (184 merged PRs in 30d)
Description
Describe the bug
In an MDX file, I am writing documentation. Certain fenced code blocks with backticks result in a RollupError and as a result I am unable to build the storybook.
This bug appeared in my monorepo. I was able to reproduce in a fresh project using npx storybook init.
Maybe there is something I'm missing in my vite.config.js or package.json?
To Reproduce
npx storybook init and follow the prompts:
- Select vite and web components
Then update Introduction.mdx to
import { Meta } from '@storybook/blocks';
<Meta title="Example/Introduction" />
```js
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
framework: {
name: "@storybook/web-components-vite",
options: {}
},
refs: {
example: {
title: "example",
url: process.env.NODE_ENV === "development" ? "http://localhost:6007/" : "example/"
}
},
docs: {
autodocs: "tag"
}
};
export default config;
```
System
System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: 3.5.0 - ~/.yarn/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Chrome: 114.0.5735.133
Edge: 113.0.1774.57
Firefox: 113.0.2
Safari: 16.5
npmPackages:
@storybook/addon-essentials: ^7.0.21 => 7.0.21
@storybook/addon-links: ^7.0.21 => 7.0.21
@storybook/web-components: ^7.0.21 => 7.0.20
@storybook/web-components-vite: ^7.0.21 => 7.0.21
Additional context
Error message:
Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /Users/name/Documents/project/packages/temp/stories/Introduction.mdx:21:481
19: }
20: },
21: docs: {
^
22: autodocs: "tag"
23: }
ERR! RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
ERR! at error (file:///Users/name/Documents/project/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2213:30)