Storybook: addon-docs can't load mdx stories - error: Identifier 'React' has already been declared

[aviraminy]

Hi,
I am using version 5.2.0-beta.32, with typescript configuration (ts-loader).
i am getting the following error when trying to load mdx files:

WARNING in ./src/components/form/Checkbox/Checkbox.stories.mdx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/aviramin/work/git-core/digitalexp-storybook-mdx/src/components/form/Checkbox/Checkbox.stories.mdx: Identifier 'React' has already been declared (8:7)

6 | import { DocsContainer } from "@storybook/addon-docs/blocks";
7 |
8 | import React from 'react';
.....

to add support for addon-docs i have done the following:

in webpack.config.js:
config.module.rules.push({
test: /\.(mdx)$/,
use: [
'babel-loader',
'@mdx-js/loader',
]
});
config.resolve.extensions.push('*', '.ts', '.tsx', '.mdx');

in presets.js:
module.exports = [
{
name: "@storybook/addon-docs/react/preset",
options: {
configureJSX: true
}
}
];

in config.js:
...
const reqMdxStories = require.context('../src', true, /\.stories\.(mdx)$/);
function loadStories() {
//req.keys().forEach(filename => req(filename));
reqAppStories.keys().forEach(filename => reqAppStories(filename));
reqCompStories.keys().forEach(filename => reqCompStories(filename));
reqMdxStories.keys().forEach(filename => reqMdxStories(filename));
}
...
configure(loadStories, module);

in addons.js:
import '@storybook/addon-docs/register';

[shilman]

@aviraminy A few things:
1) MDX automatically imports react, so you don't have to in those files
2) Your loadStories is messed up. It needs to return an array of exported objects from every file that is not a storiesOf file (i.e. MDX, CSF)
3) I think you don't need the webpack.config.js because the preset should be doing that for you.
4) You also don't need addons.js (also gets done by the preset)
5) You should upgrade to the latest RC

Hope that helps!

[aviraminy]

@aviraminy A few things:

1. MDX automatically imports react, so you don't have to in those files
2. Your loadStories is messed up. It needs to return an array of exported objects from every file that is not a storiesOf file (i.e. MDX, CSF)
3. I think you don't need the webpack.config.js because the preset should be doing that for you.
4. You also don't need addons.js (also gets done by the preset)
5. You should upgrade to the latest RC

Hope that helps!

Thanks, it seams like i have overloaded with preset + manual configurations.
I upgraded to latest RC + fix loadStories as you suggested + removed webpack config + remove addon register

issue is solved, thanks again