skip to Main Content

I’m new to coding and I’m currently developing an embedded app for Shopify using Node.js according to this tutorial. (https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react)

My app works fine locally but failed to build when pushing to Heroku. I’ve tried every solution I can find online but none of those works.
It seems that there’s a syntax error in my code but I’ve already delete that part, why does the error still exist?

-----> Build
       Running build

       > [email protected] build /tmp/build_9491321e44d82596e81efddc7086d165
       > next build

       Creating an optimized production build ...

Failed to compile.
./pages/fetch-query.js
SyntaxError: /tmp/build_9491321e44d82596e81efddc7086d165/pages/fetch-query.js: Unterminated JSX contents (34:9)
  32 | 
  33 |          return (
> 34 |              <div>
     |                   ^
  35 |               
  36 |          );
  37 |      }}
> Build error occurred
Error: > Build failed because of webpack errors
    at Object.build [as default] (/tmp/build_9491321e44d82596e81efddc7086d165/node_modules/next/dist/build/index.js:101:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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.Galdd/_logs/2019-05-09T04_23_39_145Z-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

       Some possible problems:

       - node_modules checked into source control
         https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits

       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Here’s my package.json

{
  "name": "collection-generator-app",
  "version": "1.0.0",
  "description": "",
  "engines": {
    "node": "10.15.2",
    "npm": "6.4.1"
  },
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "start": "next start",
    "build": "next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@shopify/koa-shopify-auth": "^3.1.18",
    "@shopify/koa-shopify-graphql-proxy": "^2.1.5",
    "@shopify/polaris": "^3.11.0",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.3.1",
    "dotenv": "^7.0.0",
    "graphql": "^14.1.1",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "js-cookies": "^1.0.4",
    "koa": "^2.7.0",
    "koa-session": "^5.10.1",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-apollo": "^2.5.3",
    "react-dom": "^16.8.4"
  }
}

2

Answers


  1. You should have a closing tag for the div tag in your fetch-query.js file.

    If you already did that, commit the changes and push to heroku.
    Usually, you can do :

    • git add .
    • git commit -m "fix closing tag"
    • git push heroku master

    But it depends on how you configured your git.

    If you want to keep the div tag, take a look at the Fragments API

    Login or Signup to reply.
  2. According to the logs, you’re missing a closing html div tag.

    Solutions:

    1. delete the on line 32, OR
    2. Add after line 32 or where you deem that the should end.

    Then follow the commands @Nino wrote:

    git add .
    git commit -m "fix closing tag"
    git push heroku master
    

    That’s it. 🙂

    It’s also recommended you include /node_modules in your .gitignore. Also, include your version here in your package json. Some modules like heroku work best with node 8.0 +

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search