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
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
According to the logs, you’re missing a closing html div tag.
Solutions:
Then follow the commands @Nino wrote:
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 +