执行build命令时导入导出报错，Vercel部署失败求助（TS项目）

问题描述 #

本地WebStorm开发环境中项目运行无任何错误，但部署到Vercel执行build命令时完全失败，核心问题集中在组件的导入导出环节。

相关代码片段 #

SliderDual 组件代码 #

import React, {
  FC,
  LegacyRef,
  MutableRefObject,
  ReactNode,
  RefObject,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";

interface SliderDualProps {
  max?: number;
  min?: number;
  onChange?: (value: {
    min: number | undefined;
    max: number | undefined;
  }) => void;
  step?: number;
  tooltipChildren?: ReactNode;
}

const SliderDual: FC<SliderDualProps> = ({
  max = 100,
  min = 0,
  onChange,
  step,
  tooltipChildren,
}: SliderDualProps) => {
  // 组件逻辑...
};

export {SliderDual};

组件导入方式 #

import {SliderDual} from "@/core/ui/components";

tsconfig.json 配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

背景与已尝试排查 #

• 项目由原JS项目完全改写为TS，仅保留少量旧JS页面和一个TS组件文件，正在重构主站。
• 已执行的排查操作：
  • 核对所有导入导出逻辑，同配置同组件的其他项目运行正常；
  • 删除并重新安装npm依赖；
  • 清除IDE缓存，重启IDE及设备；
  • 新建TS项目迁移所有文件，本地运行正常，但build仍报相同错误。
• 可疑点：报错集中在截图标注位置；旧JS文件虽已排除在IDE外，但最初复制新TS文件时仍存在于IDE中，不确定是否有影响。

解决方案 #

1. 检查目录入口文件的导出配置 #

如果@/core/ui/components是目录，需确保该目录下存在index.ts/index.tsx文件，并正确导出SliderDual：

// @/core/ui/components/index.ts
export { SliderDual } from "./SliderDual"; // 替换为SliderDual实际文件路径

本地IDE可能自动识别目录索引，但Vercel构建环境会严格遵循模块解析规则，缺失入口文件会导致导出失败。

2. 补充Next.js路径别名配置 #

仅靠tsconfig.json的路径映射可能无法被Vercel的Webpack构建识别，需在next.config.js中补充配置：

// next.config.js
const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
};

3. 彻底清理旧文件残留 #

删除已排除在IDE外的旧JS文件，或在.gitignore中添加对应规则，避免Vercel构建时误加载旧文件导致模块冲突。本地IDE可能忽略这类文件，但Git和构建环境会扫描所有未被忽略的文件。

4. 调整组件导出方式 #

尝试同时使用默认导出与命名导出，兼容不同构建工具的解析逻辑：

// SliderDual组件文件末尾
export default SliderDual;
export { SliderDual };

导入时可测试两种方式：

// 方式1：默认导入
import SliderDual from "@/core/ui/components";
// 方式2：保持原命名导入
import { SliderDual } from "@/core/ui/components";

5. 对齐Node版本 #

确保Vercel构建使用的Node版本与本地一致，在项目根目录添加.nvmrc文件指定版本：

# .nvmrc
v18.17.0 // 替换为你本地使用的Node版本

Node版本差异可能导致模块解析或TS编译行为不一致。

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