Currently, I'm in the process of creating a website using Next.js and incorporating (local) MDX files for my content. However, I've encountered an issue where whenever I add a .MDX file to my source tree and attempt to navigate to it, Next.js throws a parsing error at different points such as after '#' signs, the front-matter section, or the JSX content. It seems like Next.js is trying to interpret the file as plain JavaScript and encountering failures.
For this project, I am utilizing Next.js version 14.0.4 and have made sure to install the necessary dependencies which include:
@next/mdx @mdx-js/loader @mdx-js/react @types/mdx gray-matter"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@next/mdx": "^14.0.4",
"@types/mdx": "^2.0.10",
"gray-matter": "^4.0.3",
Below is an excerpt from my next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
reactStrictMode: true,
}
module.exports = nextConfig
Here's a snippet of the specific file causing parsing issues:
---
Title: Test Post
---
# This is just a test post
Hello!
The error messages I've been receiving look something like this:
Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
In efforts to address this problem, I followed the guidelines outlined in the Next.js documentation regarding the installation of the MDX loader. Additionally, I attempted modifying the next.config.js, but unfortunately, the errors persisted:
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
webpack: (config, {defaultLoaders}) => {
config.module.rules.push({
test: '/\.mdx$/',
use: [
defaultLoaders.babel, {
loader: '@mdx-js/loader'
}
]
});
return config;
}
}
module.exports = nextConfig