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