Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>
  1. Import it into some of your markdown files.
title: Test page

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

<SomeLink href="#"/>


(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 - 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.


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)

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:7

github_iconTop GitHub Comments

olaywaycommented, Nov 22, 2022

@schickling here is the minimal repo: Sorry, it took me so long. If you need some help with that, I’d love to contribute!

john-tippercommented, Oct 17, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

process is not defined when importing .tsx files inside MDX file ...
I was able to resolve this by passing the component I was importing to the components prop on the component returned by getMDXComponent...
Read more >
Advanced Features: Using MDX - Next.js
Using Components, Layouts and Custom Elements. You can now import a React component directly inside your MDX page: import { MyComponent } ...
Read more >
Advanced Features: Dynamic Import - Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
Read more >
Advanced Features: Error Handling - Next.js
You can also use 404 page to handle specific runtime error like file not ... Component { constructor(props) { super(props) // Define a...
Read more >
Advanced Features: Next.js Compiler
js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found