Next.js误将MDX文件解析为纯JavaScript引发解析错误求助

问题详情 #

我使用Next.js 14.0.4搭建网站，采用本地MDX文件存储内容。每当在源码目录中添加.MDX文件并尝试访问时，Next.js会在#标记（如# Heading）、前置元数据或JSX内容后抛出解析错误，将MDX文件当作纯JavaScript解析导致失败。

已安装依赖 #

已安装以下依赖包：@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",

初始next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
    pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
    reactStrictMode: true,
}

module.exports = nextConfig

测试用MDX文件内容 #

---
Title: Test Post
---

# This is just a test post

Hello!

收到的错误信息 #

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

尝试过的无效配置 #

曾修改next.config.js为以下内容，但错误仍未解决：

/** @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

内容的提问来源于stack exchange，提问作者tzuntar