NextJS 13应用构建报错求助：本地运行正常但构建失败

结合你提供的代码和本地运行正常、构建失败的现象，以下是几个核心排查方向和解决方案：

1. Storage类依赖浏览器API导致构建报错 #

构建过程在Node.js环境执行，而new Storage()如果直接依赖localStorage这类浏览器专属API，会在构建时抛出错误。

解决方案：将Storage实例化逻辑放到客户端组件的挂载阶段，确保只在浏览器环境执行：

const WalletDetailsPage = () => {
  const [storage, setStorage] = useState(null);
  const [walletDetails, setWalletDetails] = useState(null);
  const router = useRouter();
  const [openModal, setOpenModal] = useState(false);

  useEffect(() => {
    const storageInstance = new Storage();
    setStorage(storageInstance);
    setWalletDetails(storageInstance.getWalletDetails());
  }, []);

  const disConnectWallet = () => {
    if (!storage) return;
    storage.deleteItem("WalletDetails");
    router.refresh();
    toast.success("Your wallet has been successfully disconnected");
  };

  // 其余代码保持不变
};

2. 第三方组件WalletsPage的SSR兼容性问题 #

尽管页面标记了"use client"，但NextJS构建时仍会对客户端组件做静态分析，如果@mojito-inc/secondary-market中的WalletsPage包含服务端无法执行的代码（比如直接访问window），会触发构建错误。

解决方案：用NextJS的动态导入禁用该组件的SSR：

// 替换原有的import语句
import dynamic from 'next/dynamic';

const WalletsPage = dynamic(
  () => import('@mojito-inc/secondary-market').then(mod => mod.WalletsPage),
  {
    ssr: false,
    loading: () => <div>加载中...</div> // 可选：添加加载状态
  }
);

3. 环境变量未正确注入构建环境 #

构建时process.env.NEXT_PUBLIC_ORG_ID或process.env.NEXT_PUBLIC_PAPER_CLIENT_ID可能未被正确读取（比如构建环境未配置这些变量），导致config对象出现undefined值，触发第三方组件报错。

解决方案：给环境变量添加默认值，避免undefined：

const config = {
  orgId: process.env.NEXT_PUBLIC_ORG_ID || '',
  paperClientId: process.env.NEXT_PUBLIC_PAPER_CLIENT_ID || '',
  chainId: 1,
  walletOptions: {
    enableMetamask: true,
    enableWalletConnect: true,
    enableEmail: true,
  },
};

同时确保构建环境（比如CI/CD、本地构建命令）已正确配置这些环境变量。

4. 图片路径解析问题 #

构建时images.EthIcon.src等路径可能无法被正确解析，比如images模块的导出逻辑在构建阶段无法生成正确的静态资源路径。

解决方案：

• 确保../components/ui/Images中的图片导出符合NextJS静态资源处理规则，比如使用next/image组件的导入方式，或者直接使用静态资源的绝对路径。
• 测试将图片路径替换为硬编码的相对路径，验证是否是路径解析导致的构建错误。

额外排查步骤 #

• 查看构建时的完整错误日志，定位具体报错信息（比如是localStorage未定义、第三方组件的某行代码报错等），这能大幅缩小排查范围。
• 检查第三方GraphQL SDK是否在构建阶段被执行：如果SDK初始化逻辑包含浏览器API，需要确保只在客户端环境调用。

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