為什么 heroku 我的構建失敗並說它在本地工作時找不到文件？

Question

以下是推送到 heroku 時發生的情況：

remote: -----> Build
remote:        Running build
remote:        
remote:        > react-portfolio@0.1.0 build /tmp/build_960f0e66a47347274538f4490dbb400d
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        ./src/App.js
remote:        Cannot find file './pages/About' in './src'.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! react-portfolio@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the react-portfolio@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.7v0ee/_logs/2020-05-12T22_42_31_150Z-debug.log
remote:
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to boiling-island-73749.
remote:
To https://git.heroku.com/boiling-island-73749.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/boiling-island-73749.git'

它說構建失敗，因為它找不到 About.js。 但是，我一直在本地打開我的應用程序，並且 About.js 顯示得很好。 我看不出為什么它找不到這個文件並且構建失敗。 我還不斷收到來自 heroku 的不同消息，它要么無法指定節點版本，要么顯示“engines.node 中的危險 semver 范圍 (>)”。 目前，我的 package.json 說：

 "engines": {
    "node": "12.14.x",
    "npm": "6.x"
  }

有誰知道為什么我的構建一直失敗並且它拒絕推送到 heroku？

編輯：當我進一步排除故障時，我發現問題出在我的頁面目錄中的所有組件上。 當我刪除 About.js 的導入時，它會為該目錄中的下一個組件提供錯誤。

刪除 App.js 中 /pages 中的組件的所有導入允許應用程序成功部署。 當我嘗試重新添加這些組件時，錯誤再次運行。

我想重申該應用程序在本地運行良好。 有誰知道為什么 heroku 的行為就像這些文件不存在一樣？ 它有什么不喜歡的？

作為參考，我的 App.js 如下所示：

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import PageTitle from "./components/PageTitle";
import Footer from "./components/Footer";
import About from "./pages/About";
import Portfolio from "./pages/Portfolio";
import Contact from "./pages/Contact";
import "./App.css";

function App() {

  return (
    <Router>
      <Header />
      <PageTitle>
        <Route exact path="/" component={About} />
        <Route exact path="/portfolio" component={Portfolio} />
        <Route exact path="/contact" component={Contact} />
      </PageTitle>
      <Footer />
    </Router >
  )
}

export default App;

Answer 1

我相信這與默認導出的工作方式有關。 由於您只導出一個 function，您可以重命名文件index.js ，然后您可以像這樣import * as About from../components/About 。 查看更多有關導入和導出的信息：

https://www.sitepoint.com/understanding-module-exports-exports-node-js/