使用babel-plugin-codegen构建组件时遇fs模块未找到错误

API 探路者

2026-8-16

解决Next.js中使用babel-plugin-codegen时的Module not found: Can't resolve 'fs'错误

问题原因

Next.js客户端运行环境不支持Node.js的fs模块，当前使用codegen.require()的写法会在运行时触发文件系统相关逻辑调用，导致客户端报错。虽然babel-cli能在编译阶段完成代码转换，但Next.js开发模式的编译流程未完全剥离运行时的fs依赖。

解决方案：改用codegen.macro（推荐）

codegen.macro可确保所有代码生成逻辑完全在编译阶段执行，不会遗留运行时的Node.js模块依赖，完全契合构建阶段生成组件的需求。

替换依赖包
卸载原插件，安装macro版本：

npm uninstall babel-plugin-codegen && npm install codegen.macro --save-dev

更新Babel配置
修改.babelrc，移除codegen插件（macro逻辑由babel-plugin-macros处理）：

{
  "presets": ["next/babel"],
  "plugins": ["macros", "preval"]
}

调整页面代码
修改pages/index.js，使用macro语法在编译阶段直接生成组件：

import codegen from 'codegen.macro';

// 编译阶段执行代码生成逻辑，直接得到组件
const CodegenComponent = codegen`
  module.exports = require('../components/codegenDemo')();
`;

export default function Home() {
  return <> 
    <CodegenComponent /> 
  </>;
}

调整组件生成脚本
修改components/codegenDemo.js，确保返回可直接使用的组件代码：

// 无参数场景直接返回组件字符串，需传参可在macro代码块中传入对应值
module.exports = () => `<div>Generated Component</div>`;

备选方案：配置Webpack排除客户端fs依赖

若需保留原插件，可通过Next.js的Webpack配置让客户端忽略fs模块：

新建或修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅服务器端保留fs依赖，客户端禁用该模块
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false
      };
    }
    return config;
  }
}

module.exports = nextConfig;