storybookjs/storybook

[Bug]: @storybook/web-components-vite `RollupError: Unexpected token` in mdx

Open

#23,098 opened on Jun 15, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
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)

Contributor guide