'process is not defined' error when importing components that include Next.js Link in MDX files

Bug description

Importing React components that include Next.js’s Link into MDX files results in the following client-side error:

Steps to reproduce the behavior

Test it yourself

1. Create a React component that uses Next.js Link:

import Link from 'next/link'

export function SomeLink({ href }) {
  return (
    <Link href={href}>
      <a>I'm a Link!</a>
    </Link>
  )
}

1. Import it into some of your markdown files.

---
title: Test page
---

import { SomeLink } from "../components/SomeLink.jsx"

<SomeLink href="#"/>

➡ ERROR

(Same goes for directly importing Next’s Link in the MDX file of course, though not sure why sb would want to do that 😀)

…or use this repository

Clone this repo - https://github.com/flowershow/flowershow This repo has a template folder templates/default which is a Nextjs project and it is where Contentlayer is setup.

It can be run by doing the following:

cd templates/default
npm install
npm run dev

Then, open the app in your browser and navigate to this page: http://localhost:3000/test/components-import Then, uncomment this part of code at the bottom of the mdx file of this page (it can be found here -> /site/content/test/components-import.mdx.

{/* import { Button } from "../components/Button.jsx" */}
{/* <Button>Button component</Button> */}

May be helpful

It seems the problem is related to the code that is produced by esbuild for the page that imports such components. It includes a lot of references to the process variable which of course will be undefined outside of Node.

This is a part of the json file generated by contentlayer for such a page:

"code": "[...] var En=process.env.__NEXT_TRAILING_SLASH?e=>/\\.[^/]+\\/?$/.test(e)?Be(e):e.endsWith(\"/\")?e:e+\"/\":Be;le.normalizePathTrailingSlash=En}) [...]"

Not sure if relevant, but someone has a similar problem when using mdx-bundler - see this issue.

Logs

VM609:3 Uncaught ReferenceError: process is not defined
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:3:992)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:3:269)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:6:29295)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:3:269)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:10:1818)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:3:269)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:12:1115)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:3:269)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:12:1201)
    at eval (eval at getMDXComponent (useMDXComponent.js:1:1), <anonymous>:12:1573)
    at getMDXComponent (useMDXComponent.js?ae92:18:1)
    at eval (useMDXComponent.js?ae92:21:25)
    at mountMemo (react-dom.development.js?ac89:15846:1)
    at Object.useMemo (react-dom.development.js?ac89:16219:1)
    at Object.useMemo (react.development.js?1b7e:1532:1)
    at useMDXComponent (useMDXComponent.js?ae92:21:12)
    at Page ([[...slug]].js?655a:12:36)
    at renderWithHooks (react-dom.development.js?ac89:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:17811:1)
    at beginWork (react-dom.development.js?ac89:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at beginWork$1 (react-dom.development.js?ac89:23964:1)
    at performUnitOfWork (react-dom.development.js?ac89:22776:1)
    at workLoopSync (react-dom.development.js?ac89:22707:1)
    at renderRootSync (react-dom.development.js?ac89:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js?ac89:22293:1)
    at scheduleUpdateOnFiber (react-dom.development.js?ac89:21881:1)
    at updateContainer (react-dom.development.js?ac89:25482:1)
    at eval (react-dom.development.js?ac89:26021:1)
    at unbatchedUpdates (react-dom.development.js?ac89:22431:1)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js?ac89:26020:1)
    at Object.hydrate (react-dom.development.js?ac89:26086:1)
    at renderReactElement (index.js?46cb:515:31)
    at doRender (index.js?46cb:831:5)
    at _callee$ (index.js?46cb:408:19)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (index.js?46cb:30:27)
    at _next (index.js?46cb:48:17)
    at eval (index.js?46cb:53:13)
    at new Promise (<anonymous>)
    at eval (index.js?46cb:45:16)
    at _render (index.js?46cb:427:20)
    at render (index.js?46cb:430:20)
    at _callee$ (index.js?46cb:394:9)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)

[olayway]

@schickling here is the minimal repo: https://github.com/olayway/next-contentlayer-example/tree/nextjs-links. Sorry, it took me so long. If you need some help with that, I’d love to contribute!

[john-tipper]

I’m having a similar issue, have you managed to find a workaround please?