Skip to content

Multiple default exports from JSX snippets break subsequent imports #3126

@bjdooi

Description

@bjdooi

Description

When importing multiple JSX snippet files that each use export default, the imports break. The second (and subsequent) imports fail to resolve correctly, even though each file has its own separate default export.

Steps to reproduce

  1. Create two JSX snippet files:

/snippets/test.jsx

const Test = () => {
  return (<div>Hello World</div>);
};
export default Test;

/snippets/test1.jsx

const Test1 = () => {
  return (<div>Hello World1</div>);
};
export default Test1;
  1. Import both components in an MDX file:
import Test from '/snippets/test.jsx';
import Test1 from '/snippets/test1.jsx';

<Test />
<Test1 />
  1. Run mint dev
  2. Can run 'mint validate' but it won't return any errors

Expected behavior

Both components should import and render correctly since they are separate files with their own default exports.

Actual behavior

The imports break. The first import works, but subsequent default imports from other snippet files fail to resolve correctly.

Workaround

Using named exports instead of default exports

Environment

  • Mintlify CLI version: 4.2.269
  • Node version: v22.3.0
  • OS: macOS 14.4.1

Additional context

This appears to be related to how Mintlify bundles or resolves exports from the /snippets directory. Standard JavaScript/ESM behavior should allow multiple files to each have their own default export without conflict. If anything this quirk should be added to the docs as a note if there won't be a fix for it. I can create a PR for that if so.

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