Component Image was not imported, exported, or provided by MDXProvider as global scope

[deadcoder0904]

I am trying to use components prop on MDXProvider by passing it a custom Image component.

I did exactly as the example provided by the official MDX + Next repo here → https://github.com/mdx-js/mdx/blob/master/examples/next/pages/_app.js

Posting the code from the above link 👇

import React from 'react'
import {MDXProvider} from '@mdx-js/react'

const mdComponents = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />
}

export default ({Component, pageProps}) => (
  <MDXProvider components={mdComponents}>
    <Component {...pageProps} />
  </MDXProvider>
)

As you can see my example here → https://github.com/deadcoder0904/blog-mdx-remote/blob/master/pages/_app.js

Posting the code from the above link 👇

import { MDXProvider } from '@mdx-js/react'
import { Image } from '../components/Image'

import './new.css'
import './dark.css'

const mdComponents = { Image }

const MyApp = ({ Component, pageProps }) => {
	return (
		<MDXProvider components={mdComponents}>
			<Component {...pageProps} />
		</MDXProvider>
	)
}

export default MyApp

But I am getting the above error Component Image was not imported, exported, or provided by MDXProvider as global scope which I am not getting?

Can anyone help me out?

Here's my complete repo → https://github.com/deadcoder0904/blog-mdx-remote

[deadcoder0904]

This was some other error. This thing works as it is :)

I figured it out & dropped next-mdx-remote as it had 1 specific limitation :)