Next.js导入自定义包时出现Can't resolve 'fs'错误的解决咨询

问题根源 #

Next.js在浏览器环境编译时会自动剔除Node.js核心模块（如fs），但getStaticProps属于服务端运行逻辑。报错的核心原因是：

• Preconstruct构建的utils包默认生成兼容浏览器/Node的通用产物，导致Next.js误将其识别为浏览器端代码，尝试解析fs时失败；
• Next.js的模块解析逻辑未明确标记utils包为服务端专属依赖。

解决方案 #

1. 标记utils包为Node.js专属依赖 #

在packages/utils/package.json中添加exports字段，明确该包仅针对Node.js环境：

{
  "name": "@somename/utils",
  "exports": {
    ".": {
      "node": "./dist/index.js",
      "default": "./dist/index.js"
    }
  },
  "type": "commonjs", // 或根据你的构建目标调整为"module"
  "peerDependencies": {
    "node": ">=14.0.0"
  }
}

2. 调整Next.js Webpack配置 #

在packages/ui/next.config.js中修改webpack配置，确保服务端编译时保留fs模块并正确解析utils包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 服务端编译时不剔除fs模块
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false
      };
      // 将自定义utils包标记为外部依赖，直接使用Node.js的require逻辑
      config.externals.push('@somename/utils');
    }
    return config;
  }
};

module.exports = nextConfig;

3. 配置Preconstruct针对utils包生成Node专属产物 #

在根目录的preconstruct.config.js中，指定utils包仅构建Node环境产物：

module.exports = {
  packages: ['packages/*'],
  targets: {
    'packages/utils': ['node'],
    'packages/ui': ['browser', 'node']
  }
};

修改后重新执行preconstruct build更新产物。

4. 修正utils包的TypeScript配置 #

确保packages/utils/tsconfig.json的编译目标适配Node.js：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "outDir": "./dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

验证步骤 #

1. 重新执行bolt install确保依赖链路正确；
2. 重新构建utils包：preconstruct build packages/utils；
3. 启动ui包的Next.js应用，检查getStaticProps中调用readDirSync是否正常运行。

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