Need help importing object from mdx file into pages/index.js

Question

I am trying to create a blog in next js using mdx.

I am having trouble importing the meta object from my project-setup.mdx file into pages/index.js.

Error:

require() of ES Module /Users/user/Desktop/blog/node_modules/@mdx-js/react/index.js from /Users/user/Desktop/blog/.next/server/pages/index.js not supported. Instead change the require of /Users/blog/Desktop/blog/node_modules/@mdx-js/react/index.js in /Users/user/Desktop/blog/.next/server/pages/index.js to a dynamic import() which is available in all CommonJS modules.

project-setup.mdx

• example taken from next.js's website of their mdx setup tutorial

export const meta = {
   author: 'Rich Haines'
}

# My MDX Page with a Layout

This is a list in markdown:

- One
- Two
- Three

Checkout my React component:

pages/index.js

const Home = ({ posts }) => {
    const meta = require('../posts/project-setup.mdx');
    return (
        <div className="mt-5">
          {posts.map((post, index) => (
          ))}
        </div>
    )
}

export const getStaticProps = async () => {
    ...
}