Skip to content

When importing .mdx file in a .stories.tsx file: Unexpected FunctionDeclaration in code: only import/exports are supported  #2486

Closed
@raDiesle

Description

@raDiesle

Initial checklist

Affected packages and versions

3.0.1

Link to runnable example

CRA with Webpack and storybook 8.1.3

Steps to reproduce

  1. migrate to storybook v 8.1.3 and configure loader:
    config!.module!.rules!.push({
    test: /.mdx$/,
    use: [
    { loader: 'babel-loader', options: {} },
    {
    loader: '@mdx-js/loader',
    /** @type {import('@mdx-js/loader').Options} */
    options: {},
    },
    ],
    });

Import a mdx file into a stories.tsx file
such as

import Usage from './usage.mdx';

Expected behavior

No compile error like it was with version 7.6.17 of Storybook

Actual behavior

ERROR in ./src/all_stories/inputs/input-file/usage.mdx
Module build failed (from ../../../.yarn/berry/cache/@storybook-addon-docs-npm-8.1.3-45c056d9b8-10c0.zip/node_modules/@storybook/addon-docs/dist/mdx-loader.js):
Unexpected FunctionDeclaration in code: only import/exports are supported
@ ./src/all_stories/ lazy ^./.$ include: (?%21.node_modules)(?:/src/all_stories(?:/(?%21.)(?:(?:(?%21(?:^%7C/).).)?)/%7C/%7C$)(?%21.)(?=.)[^/]?.mdx)$ chunkName: [request] namespace object ./inputs/input-file/usage.mdx
@ ./storybook-stories.js 10:11-14:5
@ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

Runtime

Node v21

Package manager

yarn v4

OS

macOS

Build and bundle tools

Create React App

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions