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

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 >
              <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)} &#8451;
              </div>
              <div className="welement">
                <strong>Humidity : </strong>{weather.humidity} %
              </div>
              <div className="welement">
                <strong>Pressure :</strong>  {weather.press} mb
              </div>


          </div>
      </div>



  }

CodePudding user response：

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 >
              <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)} &#8451;
              </div>
              <div className="welement">
                <strong>Humidity : </strong>{weather.humidity} %
              </div>
              <div className="welement">
                <strong>Pressure :</strong>  {weather.press} mb
              </div>


          </div>
      </div>);


  }