Nested Component imports via MDX aren't JSX transformed

[andy-stewart-design]

I'm running into problems when trying to import components inside a .mdx file, and more specifically when the imported component also imports other components. What I want to be able to do

// first-post.mdx

// ideally, I would like to be able to do this
import TestComponent from "components/TestComponent";

// this currently works unless this component imports another component
import TestComponent from "./components/TestComponent";

<TestComponent />

Importing the component by starting with the base path works as long as it is a standalone component and does not import another component. If that component does include an import statement, I get the following error:

error - SyntaxError: Unexpected token '<'
    at new Function (<anonymous>)
    at getMDXComponent (file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:18:14)
    at file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:30
    at Object.useMemo (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5124:19)
    at Object.useMemo (/Users/andy/Documents/Dev/2022/webby/node_modules/react/cjs/react.development.js:1650:21)
    at useMDXComponent (file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:16)
    at SinglePostPage (webpack-internal:///./pages/posts/[slug].tsx:42:96)
    at renderWithHooks (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) {
  page: '/posts/[slug]'

The weird thing is, I'm having this issue on a project that I just spun up this morning, but not on a project that was created several months ago, even though they are using the same version of Next and ContentLayer. This could mean that it's user error, but I've looked in detail at the setup/configs for both projects and cannot find the issue.

Repro

• A minimalist reproduction can be found here

---

• The other project that I mentioned earlier that seems to be working correctly can be found here
• Specifically, you can see it working in this post, which is importing this component
• Like I mentioned, I'm not able to find a meaningful difference in the structure/configs of the two projects

Attempted Solutions:

• I'm getting the same error as mentioned in this issue. However, I have double checked, and I am defining the contentType as mdx. error - SyntaxError: Unexpected token '<' #180
• I also tried defining the cwd inside of makeSource as described here, but that did not resolve the issue. Can't import components that use external packages #302

[schickling]

Thanks for opening this issue and providing a minimal and straightforward repro! Looking into it! 🕵️

[schickling]

Based on my current investigation it seems that "nested component imports" aren't properly JSX transformed. Wondering whether this is a bug in mdx-bundler or even esbuild.

[schickling]

After further investigation it seems like this might actually be a problem in esbuild which is a transitive dependency of Contentlayer as its a dependency of mdx-bundler which Contentlayer currently relies on. (Note I'm not 100% sure this is actually a bug in esbuild - that's just my current hypothesis.)

Unfortunately I don't have enough capacity right now to create a reproduction of the underlying upstream problems. My suspicion is that other tools like mdx-bundler also suffer from this same problem. I'd greatly appreciate if someone wants to help out with investigating this further but I don't think this is a problem within Contentlayer directly.

As a temporary workaround you could use a different "MDX strategy" by avoiding direct import MyComponent from '...' in your MDX content files but rather "inject" MyComponent by passing it into the components prop like here:

const MyButton: React.FC = () => <button>Click me</button>

const Page: React.FC<{ post }> = ({ post }) => {
  const MDXContent = useMDXComponent(post.body.code)
  
  return (
    <div>
      {/* Some code ... */}
      <MDXContent components={{ MyButton }} />
    </div>
  )
}

---

Note: Implementing #298 might make this problem either more obvious or obsolete.

[steveoni]

@andy-stewart-design did you later resolve this?

[schickling]

Update: it's indeed a bug/limitation in esbuild:

• Bug: Unexpected token '<' Error evanw/esbuild#2634
• Proposed change: Proposed tsconfig.json changes evanw/esbuild#3019