Storybook/React Unable to index introduction.stories.mdx

Question

I have an old project that am trying to view and modify its component through the component explorer but everytime i try to run with

yarn storybook

it opens up on browser with no components or modules showing up and with this error

ERROR in ./src/stories/Introduction.stories.mdx Module build failed (from 
./node_modules/@storybook/mdx2-csf/loader.js): Could not parse expression with acorn: 
Unterminated template @ ./src/ lazy ^\.\/.*$ include: (?:\/src(?:\/(?%21\.)(?:(?:(? 
%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] 
 namespace object ./stories/Introduction.stories.mdx @ ./storybook-stories.js 10:11- 
14:5 @ ./storybook-config-entry.js 6:0-50 25:21-29 28:2-31:4 28:58-31:3 30:31-39

Additional information another error is shown up under that one is

preview compiled with 1 error => Failed to build the preview 99% end closing watch 
compilationWARN Force closed preview build SB_BUILDER-WEBPACK5_0003 
(WebpackCompilationError): There were problems when compiling your code with Webpack. 
Run Storybook with --debug-webpack for more information. at starter 
(./node_modules/@storybook/builder-webpack5/dist/index.js:1:9660) at starter.next 
(<anonymous>) at Module.start (./node_modules/@storybook/builder- 
webpack5/dist/index.js:1:11692) at process.processTicksAndRejections 
(node:internal/process/task_queues:95:5)

Irinairis

Can you provide information about your environment (e.g. nodejs, yarn versions)? Сan you also provide dependency information from the package.json file? The problem may be due to the installation of incompatible packages. Have you tried installing exact versions of packages, for example via npm ci? – Brause

Answer 1

Try Changing the filename from introduction.stories.mdx to introduction.mdx.

Worked for me!!

Pamella

Answer 2

This is most likely a compatibility issue with Webpack and your "old project".

Storybook use Webpack 5, and in addition you are using the lazyCompilation, which is experimental.

I think this might be your exact issue, but without the content of your MDX I won't be able to tell more : https://github.com/mdx-js/mdx/issues/1945

Otherwise, tweaking Webpack configuration might help you to resolve your issue : https://storybook.js.org/docs/builders/webpack

And I would advise you to simply follow the instruction in the error to have more information (and maybe share it here if it doesn't help you)

Run Storybook with --debug-webpack for more information

Ezra