storybookjs/storybook

[Bug]: docs addon can't compile mdx in "classic" jsx runtime mode

Open

#25,749 opened on Jan 24, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedmdxsev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

My project uses React 16 so I'm trying to set up the docs addon with "classic" jsx runtime mode for compiling mdx. When I do, mdx files fail to compile with the following error:

Module parse failed: Identifier 'React' has already been declared (6:7)

File was processed with these loaders:
 * ../../node_modules/@storybook/mdx2-csf/loader.js
You may need an additional loader to handle the result of these loaders.
| /*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/
| import {useMDXComponents as _provideComponents} from "/Users/sfishel/opt/splunk/olly/packages/olly-udf/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim";
> import React from "react";
| import {Meta, Canvas, PureArgsTable} from '@storybook/addon-docs';
| import * as Stories from './RestDataSource.stories';

To Reproduce

https://stackblitz.com/edit/github-by2l74?file=.storybook%2Fmain.ts

Contents of my main.js file:

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            jsxRuntime: 'classic',
          },
        },
      },
    },
    '@storybook/addon-webpack5-compiler-swc',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};
export default config;

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.19 - ~/opt/splunk/olly/node_modules/.bin/yarn <----- active
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3 
    @storybook/addon-docs: ^7.6.3 => 7.6.3 
    @storybook/addon-essentials: ^7.6.3 => 7.6.3 
    @storybook/addons: ^7.6.3 => 7.6.3 
    @storybook/react: ^7.6.3 => 7.6.3 
    @storybook/react-webpack5: ^7.6.3 => 7.6.3 
    @storybook/testing-react: ^2.0.0 => 2.0.1 
    @storybook/theming: 7.6.3 => 7.6.3

Additional context

If I'm understanding the code correctly, the @storybook/mdx2-csf loader is explicitly inserting an import React from 'react'; statement, but when the MDX compiler itself is in "classic" jsx runtime mode, it also inserts that same import.

Contributor guide