我正在尝试将我的create-react-app部署到heroku,我正常部署了我的后端Nodejs express,但是现在我已经完成了前端React的工作,所以我尝试推送代码,但出现错误。我想按照以下代码推送终端:
heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open
我想将我的github与heroku连接起来,但出现了同样的错误。我在我的应用程序中使用react-router-dom,react图标和react hooks。
这是错误:
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 14.12.0
engines.npm (package.json): 6.14.8
Resolving node version 14.12.0...
Downloading and installing node 14.12.0...
npm 6.14.8 already installed with node
-----> Installing dependencies
Installing node modules
> core-js@2.6.11 postinstall /tmp/build_f6ddf4ec_/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js
Skipping 'fsevents' build as platform linux is not supported
> fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js
Skipping 'fsevents' build as platform linux is not supported
> core-js@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/jest-haste-map/node_modules/fsevents
> node install.js
Skipping 'fsevents' build as platform linux is not supported
> core-js-pure@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
added 1650 packages in 26.048s
-----> Build
Running build
> food-shop@0.1.0 build /tmp/build_f6ddf4ec_
> react-scripts build
Creating an optimized production build...
Failed to compile.
Error: Parse Error: <3 FOOD</title>
<link href="/static/css/main.bbb791ae.chunk.css" rel="stylesheet"></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script>!function(e){function r(r){for(var n,f,l=r[0],p=r[1],i=r[2],c=0,s=[] ;c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push (o[f][0]),o[f]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p [n]);for(a&&a(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}functi on t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){v ar p=t[l];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={ },o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1, exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f .c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,ge t:t})},f.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object .defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e ,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if( 4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);i f(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"stri ng"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));re turn t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:fun ction(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.proto type.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpfood-shop"]=thi s["webpackJsonpfood-shop"]||[],p=l.push.bind(l);l.push=r,l=l.slice();for(var i =0;i<l.length;i++)r(l[i]);var a=p;t()}([]);
//# sourceMappingURL=runtime-main.2f982ca8.js.map</script><script src="/static /js/2.38077f76.chunk.js"></script><script src="/static/js/main.d7c3f28e.chunk. js"></script></body>
</html>
- htmlparser.js:244 new HTMLParser
[build_f6ddf4ec_]/[html-minifier-terser]/src/htmlparser.js:244:13
- htmlminifier.js:993 minify
[build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:993:3
- htmlminifier.js:1354 Object.exports.minify
[build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:1354:16
- index.js:445 HtmlWebpackPlugin.postProcessHtml
[build_f6ddf4ec_]/[html-webpack-plugin]/index.js:445:41
- index.js:274
[build_f6ddf4ec_]/[html-webpack-plugin]/index.js:274:25
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! food-shop@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the food-shop@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.eMeWR/_logs/2020-10-07T16_43_19_867Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
知道这里有什么问题吗?
通读日志。尤其是“运行版本”下面的部分。它说:Error: Parse Error: <3 FOOD</title>
。这意味着你的HTML<title>
标记中有语法错误。由于你使用的是CRA,因此很可能是public/index.html
文件。
该错误表明<3
你的标题中有。在HTML中,你必须转义文本中的<
和>
字符,就像保留给HTML标记的字符一样。
在你的中<title>
,替换<3
为<3
。的<
是HTML实体的<
字符(升ESS吨HAN)。
另请参阅:哪些字符需要在HTML中转义?
非常感谢你!:)