Search code examples
herokudeploymentbuildmodule

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


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


          </div>
      </div>



  }

Solution

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