I can not import Image component from next/image

• mdx-bundler version: ^5.2.1
• node version: v16.3.0
• npm version: 7.20.1

Relevant code or config

import * as React from 'react'
import Image from 'next/image'

function EsstentialismGraph() {
  return (
    <div className="mt-4 flex justify-center">
      <Image src={'/essentialism_graph.svg'} 
        alt="Tư tưởng cốt lõi và không cốt lõi"
        layout="intrinsic" 
        width={250} 
        height={300} />
    </div>
    )
}

export default EsstentialismGraph

What you did: Thank you for an amazing project! I try to import EsstentialismGraph component to the MDX file but it turns out I get an error about the process. I figured out the problem was I used Image component from next.

What happened:

Reproduction repository:

Problem description:

Suggested solution:

[Arcath]

As far as I am aware next/image needs to be supplied as a global so that it comes from the next.js app iinstead of being imported seperately. The same is true for next/link.

[nterol]

As far as I am aware next/image needs to be supplied as a global so that it comes from the next.js app iinstead of being imported seperately. The same is true for next/link.

I’m not sure to understand how to do that. I added

globals: { 'next/image': 'nextImage', 'next/link': 'nextLink' }

to the bundleMDX function and provided

import NextImg from 'next/image';
import Link from 'next/link';
/* 
...
*/
getMDXComponent(code, { nextImage: NextImg, nextLink: Link });

to the page component, but still receive this error whenever I import a component using next/image : ReferenceError: process is not defined

Am I missing something here ?