0

Using mdx-bundler, can I not import a file which imports another file?

Right now, in my .mdx file I do:

import MyComponent from './MyComponent'

This is my *mdx* file.

<MyComponent />

This works, when <MyComponent /> looks like this:

const MyComponent = () => {
    return <div>Hello</div>
}

export default MyComponent

However, once I import something, it will fail. So when I change <MyComponent /> to this:

import AnotherBasicComponent from './AnotherBasicComponent'

const MyComponent = () => {
    return <div> 
      <AnotherBasicComponent />
    </div>
}

export default MyComponent

I get:

SyntaxError: Unexpected token '<' at new Function () at getMDXExport (/Users/anton/projects/superdoo/node_modules/.pnpm/mdx-bundler@9.2.1_esbuild@0.15.18/node_modules/mdx-bundler/dist/client.js:44:14) at getMDXComponent (/Users/anton/projects/superdoo/node_modules/.pnpm/mdx-bundler@9.2.1_esbuild@0.15.18/node_modules/mdx-bundler/dist/client.js:24:21)

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
antonwilhelm
  • 5,768
  • 4
  • 19
  • 45

1 Answers1

-1

Maybe try downgrading esbuild to 0.12.29.

I had a similar problem just now — I was getting the

Unexpected token '<' at new Function () at getMDXExport

error from my version of <MyComponent />, but I wasn't even importing <AnotherBasicComponent /> into it. The error went away though after implementing this solution from mdx-bundler issue 113. I then tested the fix against your situation by importing another basic component into my original component, and everything was still working fine.

In some more detail, here's what I did:

// package.json
{
  ...,
  "dependencies": {
    "esbuild": "~0.12.29", // downgrade
    "mdx-bundler": "^9.2.1",
    "next": "latest",
    ...
  }
}

then npm install or yarn.

If this does work for you, there might be some more resilient fixes to try. Maybe something could be done with mdx-bundler's esbuild options.

Tom
  • 1