为什么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

我相信这与默认导出的工作方式有关。因为您只导出一个函数，所以可以将文件重命名为index.js，然后像这样导入组件import * as About from ../components/About。检出有关导入和导出的更多信息：

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