Heroku build fails on git push because of Rollup-CodePudding

I am deploying my first Heroku app (NodeJS) but when it comes to the last 'git push heroku master' step, I get an error that causes the build to fail because of problems with rollupjs. I dont even think I am using Rollup for anything in my app, and I even tried global and dependency uninstall of Rollup to see if it would change anything, but no. How do I resolve this problem?

remote: Could not resolve './sections/Home.jsx' from src/main.jsx
remote: error during build:
remote: Error: Could not resolve './sections/Home.jsx' from src/main.jsx
remote:     at error (file:///tmp/build_544c0c85/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
remote:     at ModuleLoader.handleResolveId (file:///tmp/build_544c0c85/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:22350:24)
remote:     at file:///tmp/build_544c0c85/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:22313:26
remote: 
remote: -----> Build failed

main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import Home from './sections/Home.jsx'
import { BrowserRouter, Routes, Route } from "react-router-dom"

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}>
          </Route>
        </Routes>
      </BrowserRouter>
  </React.StrictMode>
)

Home.jsx:

import React from "react";
import About from "./About";
import Projects from "./Projects";
import Landing from "./Landing";
import Navbar from './Navbar'
import Skills from "./Skills";
import Footer from './Footer'
import Contact from "./Contact"
import { useState } from "react";
import { useEffect } from "react";
import '../App.css'

function Home() {
    const [darkTheme, setDarkTheme] = useState(true)
    const [darkLand, setDarkLand] = useState(true)
    const [count, setCount] = useState(0)

    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme == "dark") {
      document.body.classList.toggle("light-theme");
      setDarkTheme(true)
      setCount(count   1)
    } else if (currentTheme == "light") {
      document.body.classList.toggle("dark-theme");
      setDarkTheme(false)
      setCount(count   1)
    }
    
    function themeChange() {
      if (prefersDarkScheme.matches) {
        document.body.classList.toggle("light-theme");
        setDarkTheme(true)
        setCount(count   1)
      } else {
        document.body.classList.toggle("dark-theme");
        setDarkTheme(false)
        setCount(count   1)
      }
    };

    useEffect(() => {
        setDarkLand(!darkLand)
    }, [count])



    return(
        <div className="Home fade" id="home" key={darkTheme}>
            <Navbar themeChange={themeChange} darkLand={darkLand} />
            <Landing darkLand={darkLand} key={darkLand}/>
            <About />
            <Skills />
            <Projects />
            <Contact />
            <Footer />
        </div>
    )
}

export default Home

CodePudding user response：

Mac and Windows (one of which you're probably using to develop) have case-insensitive filesystems. Linux (which you're deploying to) has case-sensitive filesystems. ./sections/Home.jsx will work on your computer, but not on Heroku — change it to ./Sections/Home.jsx. And a personal tip, if you want to avoid problems like this you can set a rule for yourself to always use lowercase filenames and directories.