Next.js+TypeScript项目集成google-spreadsheet包后图片Loader配置异常问题求助

我来帮你梳理问题根源和解决方案：

第一个错误的背景 #

你遇到的Module not found: Can't resolve 'child_process'错误，是因为google-auth-library（google-spreadsheet的依赖）使用了Node.js核心模块，而这些模块在Next.js的客户端编译环境中不存在。你通过webpack配置将这些模块设为empty的思路是正确的，但问题出在配置的合并方式上。

第二个错误的原因 #

你修改next.config.js时，直接覆盖了webpack属性，导致withImages插件原本添加的图片处理loader被丢失——这就是后来出现图片解析失败错误Module parse failed: Unexpected character '�'的原因。

正确的解决方案 #

调整next.config.js的写法，确保withImages的webpack配置和你的自定义node配置合并生效，而非互相覆盖：

const withImages = require('next-images');

module.exports = withImages({
  trailingSlash: true,
  webpack: (config, options) => {
    // 先让withImages处理webpack配置，保留图片加载loader
    config = withImages.webpack(config, options);
    
    // 添加Node.js核心模块的空配置，解决child_process等缺失问题
    config.node = {
      ...config.node, // 保留原有node配置（如果存在）
      fs: 'empty',
      child_process: 'empty',
      net: 'empty',
      dns: 'empty',
      tls: 'empty'
    };
    
    return config;
  }
});

额外的TypeScript配置 #

因为你使用TypeScript开发，还需要添加图片文件的类型声明，避免TS报错"找不到模块"：
在项目根目录的types文件夹下创建images.d.ts文件（没有types文件夹就新建一个），内容如下：

declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

// 若用到其他图片格式，比如svg、gif，可添加对应声明
declare module '*.svg' {
  const value: string;
  export default value;
}

这样调整后，既解决了child_process的模块缺失问题，又能保留withImages的图片加载能力，同时满足TypeScript的类型检查要求。

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