Heroku部署Git Push失败：Rollup无法解析文件求助

问题详情 #

首次部署NodeJS应用到Heroku，执行git push heroku master时构建失败，核心报错为：

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

未主动引入Rollup，尝试全局及依赖卸载Rollup无效。相关代码片段如下：

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

解决方法 #

1. 核对文件路径与大小写 #

Heroku基于Linux环境，文件名严格区分大小写：

• 确认src/sections/Home.jsx文件真实存在，文件名的大小写和main.jsx中的导入语句完全一致（比如不能写成home.jsx或HOME.jsx）
• 验证目录结构：main.jsx在src/目录下，./sections/Home.jsx对应的实际路径是src/sections/Home.jsx，确保该目录和文件无误

2. 确认文件已提交至Git #

如果本地文件存在但未提交，Heroku构建时无法读取。执行以下命令检查并提交：

# 查看未跟踪文件
git status
# 若Home.jsx未跟踪，执行添加与提交
git add src/sections/Home.jsx
git commit -m "Add Home.jsx to source control"
# 重新推送至Heroku
git push heroku master

3. 本地预构建验证 #

先在本地执行构建命令，排查是否为本地环境问题：

npm run build

若本地构建也报相同错误，优先在本地修复路径或文件问题，再推送至Heroku。

关于Rollup的说明 #

你未主动使用Rollup是因为Vite内部依赖Rollup完成构建流程，卸载Rollup会导致Vite无法正常工作，因此无需卸载Rollup，问题根源不在Rollup本身。

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