storybookjs/storybook
View on GitHub[Bug]: docs addon can't compile mdx in "classic" jsx runtime mode
Open
#25,749 opened on Jan 24, 2024
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.