storybookjs/storybook

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

Offen

#25.749 geöffnet am 24.01.2024

 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (10.058 Forks)batch import
bughelp wantedmdxsev:S3

Repository-Metriken

Stars
 (89.909 Sterne)
PR-Merge-Metriken
 (Durchschn. Merge 7T 22h) (184 gemergte PRs in 30 T)

Beschreibung

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