部署Vite React应用至Vercel时出现构建导入错误，本地运行正常

问题现象 #

将Vite React应用部署至Vercel时触发构建错误，但本地开发与本地构建均正常运行。

构建错误信息 #

无法从"src/App.jsx"解析"./components/navigation/navbar"
文件路径：/vercel/path0/src/App.jsx
错误栈：
at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:395:41)
at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:391:42)
at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20006:24)
at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:19966:26
Error: Command "npm run build" exited with 1

文件夹结构 #

相关文件内容 #

eslint.config.js #

import js from "@eslint/js";
import globals from "globals";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import eslintImport from "eslint-plugin-import"; // Import the plugin

export default [
  { ignores: ["dist"] },

  {
    files: ["**/*.{js,jsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    settings: {
      react: { version: "18.3" },
    },
    plugins: {
      react,
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      import: eslintImport,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs["jsx-runtime"].rules,
      ...reactHooks.configs.recommended.rules,
      "react/jsx-no-target-blank": "off",
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
      "import/no-unresolved": ["error", { caseSensitive: true }],
    },
  },
];

App.jsx #

import Navbar from "./components/navigation/navbar";
import Footer from "./components/navigation/footer";
import Routers from "./routers";

function App() {
  return (
    <>
      <Navbar />
      <Routers />
      <Footer />
    </>
  );
}

export default App;

已尝试的解决方案 #

• 将所有文件和文件夹改为小写，处理大小写敏感问题
• 多次删除node_modules和package-lock.json后重新安装依赖

可行的排查与解决步骤 #

• 补全文件扩展名：Vite在生产构建时对模块解析的严格度高于本地开发，尝试在导入时添加完整的.jsx扩展名：

  import Navbar from "./components/navigation/navbar.jsx";
  import Footer from "./components/navigation/footer.jsx";
  

• 配置Vite的扩展名解析：在vite.config.js中明确指定需要解析的文件扩展名，确保构建时能识别：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  })
  

• 确认Git提交状态：检查navbar.jsx或对应文件是否已被提交至Git仓库，Vercel仅会拉取仓库中存在的文件，避免本地文件未提交导致的缺失
• 统一Node版本：在package.json中指定Node版本，确保Vercel构建环境与本地一致：

  "engines": {
    "node": ">=18.x"
  }
  

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