I can not import Image component from next/image

[ghost]

• 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:

[chrislicodes]

• mdx-bundler version: ^5.2.1
• npm-version: 7.15.0
• node-version: v15.14.0

I also tried to bundle a component which is using

 import { useRouter } from "next/router"

receiving following error-messages:

First I thought ChakraUI is the problem, but once I comment out the router it works fine.

[leerob]

In your code example, I don't see a src provided for the image. I'm able to use next/image with mdx-bundler as follows:

<Image
  alt={`my image`}
  src={`/my-image.png`}
  width={2548}
  height={1640}
/>

After including next/image as Image is the forwarded components.

[ghost]

Yes, It worked after Image component is forwarded or is added as a global component. @leerob I'm curious why I can't import Image in the MDX file directly as the way I did with clsx or React.

It works:

import clsx from 'clsx'
import * as React from 'react'

But it doesn't work:

import Image from 'next/image'

[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 ?

[jloesch30]

I was encountering a similar issue. It seems that adding the next component to the global list when defining bundleMdx was the trick such as below:

globals: {
  "next/router": "Router",
   "next/link": "Link",
   "next/image": "Image",
},

And then when I call getMdxComponent, we can pass in the imported next components with their corresponding key to the value described above:

import Link from "next/link";
import Image from "next/image";
import { Router } from "next/router";
...

  const Component = useMemo(
    () => getMDXComponent(code, { Link: Link, Image: Image, Router: Router }),
    [code]
  );

This allowed me to import a component in my MDX file that uses one of the above Next components