Deploying Vite react but it show build error due to import but in local it work fine

Question

Here is folder structure

The code is working fine on local/local build - but I'm getting an error while deploying vite react app on vercel

Error during build:

Could not resolve "./components/navigation/navbar" from "src/App.jsx"
file: /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`

Here is the eslint.config.js file:

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 }],
    },
  },
];

Here is app.js file:

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;

I have kept all file and folder in lower case to deal with case sensitivity, also deleted module and package-lock.json multiple time

Answer 1

Thanks for help, found the issue, it is due to the in window/mac file or folder name not case sensitive but in deployment it use Linux in which file name is case sensitive, i have changed file and folder name but it not tracked in git, we have to config git to get it tracked by using git config core.ignorecase false