[英]Why does heroku fail my build and says it cannot find a file when it works locally?
Here is what happens when pushing to heroku:以下是推送到 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'
It says the build is failing because it cannot find About.js.它说构建失败,因为它找不到 About.js。 HOWEVER, I've been opening my app locally and About.js is showing just fine.
但是,我一直在本地打开我的应用程序,并且 About.js 显示得很好。 I see no reason why it cannot find this file and failing the build.
我看不出为什么它找不到这个文件并且构建失败。 I also keep getting different messages from heroku that it either cannot specify the node version, or it says "Dangerous semver range (>) in engines.node."
我还不断收到来自 heroku 的不同消息,它要么无法指定节点版本,要么显示“engines.node 中的危险 semver 范围 (>)”。 Currently, my package.json says this:
目前,我的 package.json 说:
"engines": {
"node": "12.14.x",
"npm": "6.x"
}
Does anyone know why my build keeps failing and it refuses to push to heroku?有谁知道为什么我的构建一直失败并且它拒绝推送到 heroku?
EDIT: As I'm troubleshooting this further, I'm finding that the problems are all the components in my pages directory.编辑:当我进一步排除故障时,我发现问题出在我的页面目录中的所有组件上。 When I remove the import for About.js, it gives an error for the next component inside that directory.
当我删除 About.js 的导入时,它会为该目录中的下一个组件提供错误。
Removing all the imports for the components that are sitting in /pages in App.js allows the App to successfully deploy.删除 App.js 中 /pages 中的组件的所有导入允许应用程序成功部署。 When I try to add these components back in, the error runs again.
当我尝试重新添加这些组件时,错误再次运行。
I want to reiterate that the app runs fine locally.我想重申该应用程序在本地运行良好。 Does anyone know why heroku acts like these files don't exist?
有谁知道为什么 heroku 的行为就像这些文件不存在一样? What doesn't it like about it?
它有什么不喜欢的?
For reference, my App.js looks like this:作为参考,我的 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;
I believe this has to do with how default export works.我相信这与默认导出的工作方式有关。 Since you're only exporting one function, you can rename the file
index.js
and then you can import the component like this import * as About from../components/About
.由于您只导出一个 function,您可以重命名文件
index.js
,然后您可以像这样import * as About from../components/About
。 Checkout more on importing and exporting:查看更多有关导入和导出的信息:
https://www.sitepoint.com/understanding-module-exports-exports-node-js/ https://www.sitepoint.com/understanding-module-exports-exports-node-js/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.