storybookjs/storybook
[Bug]: docs addon can't compile mdx in "classic" jsx runtime mode
Offen
#25.749 geöffnet am 24.01.2024
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.