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

[sfishel-splunk]

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.

[dimitur2204]

Did you manage to resolve that?

[sfishel-splunk]

Did you manage to resolve that?

We have a workaround for our particular setup, not sure how portable it is:

    webpackFinal: async (config) => {
        config.module.rules.forEach((rule) => {
            if (
                !!rule.use?.find(
                    (use) => use.loader === require.resolve('@storybook/mdx2-csf/loader')
                )
            ) {
                rule.use?.unshift({
                    loader: 'string-replace-loader',
                    options: {
                        search: "import React from 'react';",
                        replace: '',
                    },
                });
            }
        });
        return config;
    },