[Bug]: MDX Compilation breaks when using @vitejs/plugin-react-swc and extending its plugins

[luke-m]

Describe the bug

When running storybook build, the process fails with error messages that lead me to believe that the MDX compilation package is not working correctly:

× Expected ';', '}' or <eof>
    ╭─[/Users/xxx/Documents/DEV/storybook-vite-2/src/stories/Configure.mdx:33:1]
 33 │     
 34 │     <Meta title="Configure your project" />
 35 │     
 36 │ ╭─▶ <div className="sb-container">
 37 │ │     <div className='sb-section-title'>
 38 │ │       # Configure your project
 39 │ │   
 40 │ │       Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
 41 │ │     </div>
 42 │ │     <div className="sb-section">
 43 │ │       <div className="sb-section-item">
 44 │ │         <img
 45 │ │           src={Styling}
 46 │ │           alt="A wall of logos representing different styling technologies"
 47 │ │         />
 48 │ │         <h4 className="sb-section-item-heading">Add styling and CSS</h4>
 49 │ │         <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
 50 │ │         <a
 51 │ │           href="https://storybook.js.org/docs/react/configure/styling-and-css"
 52 │ │           target="_blank"
 53 │ │         >Learn more<RightArrow /></a>
 54 │ │       </div>
 55 │ │       <div className="sb-section-item">
 56 │ │         <img
 57 │ │           src={Context}
 58 │ │           alt="An abstraction representing the composition of data for a component"
 59 │ │         />
 60 │ │         <h4 className="sb-section-item-heading">Provide context and mocking</h4>
 61 │ │         <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
 62 │ │         <a
 63 │ │           href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking"
 64 │ │           target="_blank"
 65 │ │         >Learn more<RightArrow /></a>
 66 │ │       </div>
 67 │ │       <div className="sb-section-item">
 68 │ │         <img src={Assets} alt="A representation of typography and image assets" />
 69 │ │         <div>
 70 │ │           <h4 className="sb-section-item-heading">Load assets and resources</h4>
 71 │ │           <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
 72 │ │           `staticDirs` configuration option to specify folders to load when
 73 │ │           starting Storybook.</p>
 74 │ │           <a
 75 │ │             href="https://storybook.js.org/docs/react/configure/images-and-assets"
 76 │ │             target="_blank"
 77 │ │           >Learn more<RightArrow /></a>
 78 │ │         </div>
 79 │ │       </div>
 80 │ │     </div>
 81 │ │   </div>
 82 │ ├─▶ <div className="sb-container">
    · ╰───     ─────────
    · ╰──── This is the expression part of an expression statement
 83 │       <div className='sb-section-title'>
 84 │         # Do more with Storybook
    ╰────

It seems like MDX is being interpreted as Javascript.

This is what my .storybook/main.ts looks like:

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

This is what my vite.config.ts looks like:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import {lingui} from "@lingui/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react({
            plugins: [["@lingui/swc-plugin", {}]],
        }),
        lingui()
    ],
})

Package versions (fresh install):

@lingui/cli": "^4.5.0",
"@lingui/macro": "^4.5.0",
"@lingui/swc-plugin": "^4.0.4",
"@lingui/vite-plugin": "^4.5.0",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-vite": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"eslint-plugin-storybook": "^0.6.15",
"storybook": "^7.5.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"

I set up a minimal reproduction example, see below. I setup the project using npm create vite@latest, selecting react and TS+SWC. I then ran npx storybook@latest init in the project. I then initialised Lingui in the project, using the @lingui/vite-plugin and the @vitejs/plugin-react-swc package.

Running storybook dev -p 6006 works fine. It's just the build that fails.

I don't know if the problem comes from storybook or vite or lingui, but I decided to open the issue here in hopes of someone smarter than me pointing me in the right direction.

The bug also happens when I pass an empty plugins array into @vitejs/plugin-react-swc like this:

export default defineConfig({
    plugins: [
        react({
            plugins: [],
        }),
        lingui()
    ],
})

That leads me to believe that somewhere someone is incorrectly merging the plugins and overwriting the MDX plugin, thus disabling MDX compilation.

To Reproduce

https://github.com/luke-m/storybook-vite-lingui-example

System

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm <----- active
  Browsers:
    Chrome: 119.0.6045.123
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: ^7.5.3 => 7.5.3 
    @storybook/addon-interactions: ^7.5.3 => 7.5.3 
    @storybook/addon-links: ^7.5.3 => 7.5.3 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.5.3 => 7.5.3 
    @storybook/react: ^7.5.3 => 7.5.3 
    @storybook/react-vite: ^7.5.3 => 7.5.3 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.5.3 => 7.5.3

Additional context

No response

[woodreamz]

I have the same issue, even if the plugins array is empty, it fails.

[simonpkerr]

Same issue -

• vite 5.0.7
• storybook 7.6.3
• react 18.2

I did have @swc/plugin-styled-components in the plugins list for react in vite config. Removing this did get the build working again

[jaens]

Same issue on a run-of-the-mill Storybook. Removing the plugins option from Vite's react() block fixed it.

• vite 5.1.1 (latest)
• @storybook/react-vite 7.6.15 (latest)
• @vitejs/plugin-react-swc 3.5.0

As a workaround, since Storybook builds with Vite mode === "production" && process.env.NODE_ENV === "production", you can add an if statement based on that to not set the plugins key in that case (assuming you only need the plugins in dev)