Next.js/Webpack5安装Plaiceholder提示无法解析child_process如何解决

核心原因 #

getPlaiceholder依赖Sharp和child_process等Node.js原生模块，这类模块只能在Node环境运行，不能打包进客户端代码。你当前的报错是因为在客户端可执行的组件代码中直接导入/调用了plaiceholder相关逻辑，Webpack5打包客户端包时找不到对应Node原生模块导致的。

最优修复方案（完全符合构建阶段生成base64的需求） #

将getPlaiceholder的调用逻辑全部移入Next.js仅在服务端/构建阶段执行的生命周期函数中，比如getStaticProps（静态构建）或者getServerSideProps（服务端渲染），相关代码不会被打包进客户端包，自然不会触发报错。

代码示例 #

import Image from "next/image";
import React from "react";

// 页面组件直接使用props传入的base64，无需导入plaiceholder
export default function ImagePage({ imgUrl, blurBase64 }) {
  return (
    <Image
      src={imgUrl}
      placeholder="blur"
      blurDataURL={blurBase64}
      width={800}
      height={600}
    />
  );
}

// 仅在构建/服务端运行，不会进入客户端bundle
export async function getStaticProps() {
  // 动态导入plaiceholder，仅在服务端环境加载
  const { getPlaiceholder } = await import("plaiceholder");
  const imgUrl = "你的实际图片地址";
  const { base64 } = await getPlaiceholder(imgUrl);
  
  return {
    props: {
      imgUrl,
      blurBase64: base64
    },
    // 按需配置增量静态再生规则
    revalidate: 86400
  };
}

如果是动态路由页面，配合getStaticPaths使用即可实现所有页面构建阶段预生成base64占位符的需求。

兜底兼容方案 #

如果确实存在无法避免的客户端导入场景，可以在next.config.js中配置Webpack规则，客户端打包时忽略Node原生模块：

module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        child_process: false,
        fs: false,
        path: false,
        os: false,
        crypto: false
      };
    }
    return config;
  }
};

注意：该方案仅为兜底，不推荐优先使用，因为如果客户端代码实际执行了getPlaiceholder逻辑还是会报错，仅能解决打包阶段的模块找不到错误。

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