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