NextJS启动npm服务器时遇Module parse失败错误求助

1. 修复next.config.js的重复导出问题 #

你的配置存在两次module.exports，第二次会覆盖第一次配置，需合并为完整的单一配置对象。

2. 添加.node二进制文件的Webpack处理规则 #

Webpack无法解析.node格式的二进制模块，需添加对应规则让file-loader处理这类文件。

3. 移除冗余Babel配置，解决next/font冲突 #

NextJS默认使用SWC编译，手动添加babel-loader和自定义Babel配置会强制切换为Babel编译，与next/font依赖SWC的要求冲突，需删除相关配置。

修改后的完整next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 处理依赖fallback
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      path: false,
      net: false,
      tls: false,
      dns: false
    };

    // 新增处理.node二进制文件的规则
    config.module.rules.push({
      test: /\.node$/,
      use: 'file-loader'
    });

    // 扩展文件别名配置
    config.resolve.extensionAlias = {
      ".js": [".ts", ".tsx", ".js", ".jsx"],
      ".mjs": [".mts", ".mjs"],
      ".cjs": [".cts", ".cjs"],
    };

    // 合并图片资源处理规则，避免重复冲突
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|ico|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '[name].[hash:7].[ext]',
          outputPath: 'images/'
        }
      }
    });

    return config;
  }
};

module.exports = nextConfig;

4. 清理Babel相关文件 #

删除项目根目录下的.babelrc（或babel.config.json）文件，让NextJS使用默认SWC编译。

5. 重置依赖并重启项目 #

rm -rf node_modules package-lock.json yarn.lock
npm install
npm run dev

核心说明 #

• .node是二进制扩展模块，无需Webpack解析内容，仅需用file-loader复制到输出目录即可。
• 移除手动添加的babel-loader后，NextJS自动启用SWC编译，彻底解决next/font的冲突问题。
• 合并重复的图片处理规则，避免多loader处理同类型文件引发的冲突。

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