Next.js构建报错：Module parse失败，无法处理.node二进制文件

问题根源分析 #

1. next.config.js配置格式错误：导出对象中包含nextConfig、optimization、externals、loaders这些不属于Next.js根配置的属性，触发配置无效警告。
2. 二进制文件未配置对应loader：.node二进制文件需要特定loader处理，但原配置错误地在根级别添加loaders，未正确注入到webpack规则中。

解决方案步骤 #

1. 修正next.config.js配置结构 #

将所有配置整合到一个Next.js配置对象中，把webpack相关修改（loader、optimization、externals）放到webpack函数内部：

/**
 * @type {import('next').NextConfig}
 */
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const path = require('path');

const nextConfig = {
  experimental: {
    forceSwcTransforms: true,
  },
  publicRuntimeConfig: {
    staticFolder: "https://basic.am/static",
  },
  webpack: (config, { isServer }) => {
    // 处理浏览器端依赖fallback
    if (!isServer) {
      config.resolve.fallback.fs = false;
      config.resolve.fallback.tls = false;
      config.resolve.fallback.net = false;
      config.resolve.fallback.dns = false;
    }

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

    // 合并压缩插件配置
    config.optimization = {
      ...config.optimization,
      minimizer: [new UglifyJsPlugin()]
    };

    // 合并外部依赖配置
    config.externals = {
      ...config.externals,
      saslprep: require("saslprep"),
    };

    return config;
  }
};

module.exports = nextConfig;

2. 安装必要依赖 #

由于使用raw-loader处理二进制文件，需先安装该loader：

npm install raw-loader --save-dev

关键修改说明 #

• 移除根级无效属性：将所有webpack相关配置移到webpack函数内部，避免Next.js配置校验警告。
• 正确配置loader规则：通过config.module.rules.push注入.node文件处理规则，让webpack识别并处理二进制文件。
• 保留原有功能：整合了原有的依赖fallback、实验特性、静态资源路径等配置，确保原有业务逻辑不受影响。

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