river bough
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: (the picture at the bottom of this post shows where the error occurs)
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
- https://nextjs.org/docs/advanced-features/using-mdx#layouts
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 () => {
...
}
