Error deploying with heroku - SyntaxError: Unexpected token '<' - heroku

Question

thanks for helping out.
My app works in localhost but I got below "unexpected token" error after deploying to Heroku. Also, I have the error regarding "favicon.ico" . Heroku log is as follow:
2022-05-02T05:47:55.619466+00:00 heroku[web.1]: Starting process with command `node app.js`
2022-05-02T05:47:56.000000+00:00 app[api]: Build succeeded
2022-05-02T05:47:57.053439+00:00 app[web.1]: /app/app.js:49
2022-05-02T05:47:57.053452+00:00 app[web.1]: return <div>
2022-05-02T05:47:57.053452+00:00 app[web.1]: ^
2022-05-02T05:47:57.053453+00:00 app[web.1]:
2022-05-02T05:47:57.053453+00:00 app[web.1]: SyntaxError: Unexpected token '<'
2022-05-02T05:47:57.053453+00:00 app[web.1]: at Object.compileFunction (node:vm:352:18)
2022-05-02T05:47:57.053454+00:00 app[web.1]: at wrapSafe (node:internal/modules/cjs/loader:1033:15)
2022-05-02T05:47:57.053455+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1069:27)
2022-05-02T05:47:57.053455+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
2022-05-02T05:47:57.053456+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32)
2022-05-02T05:47:57.053456+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2022-05-02T05:47:57.053456+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
2022-05-02T05:47:57.053457+00:00 app[web.1]: at node:internal/main/run_main_module:17:47
2022-05-02T05:47:57.178016+00:00 heroku[web.1]: Process exited with status 1
2022-05-02T05:47:57.240533+00:00 heroku[web.1]: State changed from starting to crashed
2022-05-02T05:48:51.164272+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=secure-tundra-48558.herokuapp.com request_id=b06ff127-684c-407c-a44c-5f2b70ed2506 fwd="1.36.26.158" dyno= connect= service= status=503 bytes= protocol=https
2022-05-02T05:48:53.759984+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=secure-tundra-48558.herokuapp.com request_id=2fd354ff-fc47-442b-812b-050147dd4c63 fwd="1.36.26.158" dyno= connect= service= status=503 bytes= protocol=https
Line 49 error in app.js is referring to below:
const Weather = () => {
return <div> <---- this line 49 with error
<div class="heading col-md-9">
<h5>Weather information for {weather.city}</h5>
<hr></hr>
</div>
<div className="welements col-md-9">
<div className="welement">
<strong>Weather :</strong> {weather.descp}
</div>
<div className="welement">
<strong>Temperature :</strong> {C.toFixed(2)} ℃
</div>
<div className="welement">
<strong>Humidity : </strong>{weather.humidity} %
</div>
<div className="welement">
<strong>Pressure :</strong> {weather.press} mb
</div>
</div>
</div>
}

Answer 1

have you created the Procfile?
if not then:
you need to do the following on your bash console
>cd <project directory>
>touch Procfile
>open Procfile
once you are in the procfile you need to add only single line in it
web: node app.js (or whatever is you index file)
after doing this, try again with the process
>git add .
>git commit -m "you message"
>git push heroku main
PS: also make sure your app.js is in the root directory
add a pair of ()
const Weather = () => {
return (<div>
<div class="heading col-md-9">
<h5>Weather information for {weather.city}</h5>
<hr></hr>
</div>
<div className="welements col-md-9">
<div className="welement">
<strong>Weather :</strong> {weather.descp}
</div>
<div className="welement">
<strong>Temperature :</strong> {C.toFixed(2)} ℃
</div>
<div className="welement">
<strong>Humidity : </strong>{weather.humidity} %
</div>
<div className="welement">
<strong>Pressure :</strong> {weather.press} mb
</div>
</div>
</div>);
}