Heroku fails to start application - receiving Syntax Error - heroku

I have a Nodejs app that is running fine on my local machine. I am trying to deploy to Heroku. The deployment works but the application fails to start. I am using Koa and Typescript. I first received a "Nodemon not found error" and added the Procfile that seemed to resolve that. However, I have no idea how to resolve this new error.
I am deploying this directly from Github (e.g. I push to Git and deploy to Heroku from there).
Thanks for looking
Heroku Logs Error
019-06-24T10:55:35.628075+00:00 heroku[web.1]: State changed from crashed to starting
2019-06-24T10:55:40.080980+00:00 heroku[web.1]: Starting process with command `node src/server.ts` )
2019-06-24T10:55:42.382747+00:00 heroku[web.1]: State changed from starting to crashed
2019-06-24T10:55:42.361956+00:00 heroku[web.1]: Process exited with status 1
2019-06-24T10:55:42.287058+00:00 app[web.1]: /app/src/server.ts:1
2019-06-24T10:55:42.287088+00:00 app[web.1]: import { config } from './config/config';
2019-06-24T10:55:42.287091+00:00 app[web.1]: ^
2019-06-24T10:55:42.287093+00:00 app[web.1]:
2019-06-24T10:55:42.287094+00:00 app[web.1]: SyntaxError: Unexpected token {
2019-06-24T10:55:42.287097+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:721:23)
2019-06-24T10:55:42.287099+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
2019-06-24T10:55:42.287101+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:653:32)
2019-06-24T10:55:42.287103+00:00 app[web.1]: at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
2019-06-24T10:55:42.287105+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:585:3)
2019-06-24T10:55:42.287106+00:00 app[web.1]: at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
2019-06-24T10:55:42.287108+00:00 app[web.1]: at startup (internal/bootstrap/node.js:283:19)
2019-06-24T10:55:42.287111+00:00 app[web.1]: at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Procfile
web: node src/server.ts
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": { "*": ["types/*"] },
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution" : "node",
"lib": [
"es2018"
],
"types": [
"node"
],
"sourceMap": true,
"baseUrl": "./src"
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
package.json
{
"name": "graphql-api",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "cross-env NODE_PATH=./src mocha --timeout 25000 --exit -r ts-node/register ./test/**/*.test.ts",
"start": "nodemon"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^1.19.1",
"typescript": "^3.5.1",
"chai": "^4.2.0",
"chai-http": "^4.3.0",
"mocha": "^6.1.4"
},
"dependencies": {
"#babel/runtime": "^7.4.5",
"#types/mocha": "^5.2.7",
"#types/neo4j": "^2.0.2",
"apollo-server": "^2.6.2",
"apollo-server-koa": "^2.6.3",
"babel-plugin-transform-runtime": "^6.23.0",
"bcryptjs": "^2.4.3",
"dotenv": "^8.0.0",
"fs": "0.0.1-security",
"graphql": "^14.3.1",
"graphql-voyager": "^1.0.0-rc.27",
"knex": "^0.17.6",
"koa": "^2.7.0",
"koa-bodyparser": "^4.2.1",
"koa-passport": "^4.1.3",
"koa-router": "^7.4.0",
"koa-session": "^5.12.0",
"moment": "^2.24.0",
"neo4j-driver": "^1.7.5",
"neo4j-graphql-js": "^2.5.0",
"parse-neo4j": "^0.6.11",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"pg": "^7.11.0",
"ts-node": "^8.2.0",
"tsconfig-paths": "^3.8.0",
"winston": "^3.2.1"
}
}
nodemon.json
{
"watch": ["./src"],
"ext": "ts",
"exec": "ts-node -r tsconfig-paths/register ./src/server.ts",
"ignore": ["database/migrations/*"]
}

Related

Webpack not found when deploying using heroku

I'm trying to deploy an app on heroku, but I'm getting an error when it tried to build the app with the webpack command. I have tried a number of fixes but can't seem to get it to work. I tried running the webpack.js file from node_modules like this node node_modules/webpack/bin/webpack.js but that didn't work either. Any ideas would be greatly appreciated! Here is my package.json file:
{
"name": "waste-not-client",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently npm:watch:*",
"build": "webpack --mode production",
"watch:compile": "webpack --mode development --watch",
"watch:serve": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build && node server/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"
},
"homepage": "/",
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"axios": "^1.1.3",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"framer-motion": "^7.6.7",
"nodemon": "^2.0.20",
"path": "^0.12.7",
"react": "^18.2.0",
"react-autocomplete-input": "^1.0.19",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"webpack-bundle-analyzer": "^4.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.1.2",
"babel-loader": "^8.2.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"dotenv-webpack": "^8.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "v16.16.0"
}
}
The error when I try to deploy on heroku:
sh: 1: webpack: not found
Your start script looks like it's designed for development work with live reloading. That's not what you want on Heroku.
You could rewrite your package.json scripts, but the easiest solution is probably to add a Procfile that Heroku will use in preference to your start script, e.g.
web: node server/server.js
You'll also want to remove your heroku-postbuild script entirely. It just repeats two things that Heroku does automatically (installing dependencies and running your build), and it also includes the runtime command that we now have in our Procfile.

Webpack module federation error: Cannot destructure property `ModuleFederationPlugin` of 'undefined' or 'null'

I am currently modifying the configuration file a Vue app (acting here as a host app) to implement the plugin of webpack : ModuleFederationPlugin.
The goal for me is to set up a micro-frontend architecture by getting a component from a remote app called "foo".
Here is the code to reproduce the issue :
config file host app :
const path = require("path");
const helpers = require("./config/helpers");
const { ModuleFederationPlugin } = require("webpack").container;
const config = {
configureWebpack: {
entry: {
polyfill: "#babel/polyfill",
},
stats: {
cached: false,
cachedAssets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
modules: false,
},
devServer: {
historyApiFallback: true,
port: 8765,
},
plugins: [
new ModuleFederationPlugin({
name: "vue",
remotes: {
foo: "foo#http://localhost:5173/remoteEntry.js",
},
}),
],
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [],
},
},
};
module.exports = config;
package.json host app :
{
"name": "Test",
"version": "1.0.0",
"description": "Test",
"author": "Test",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"#babel/core": "7.7.2",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.1",
"#babel/register": "7.7.0",
"#vue/cli-plugin-babel": "^4.0.5",
"#vue/cli-plugin-eslint": "^4.0.5",
"#vue/cli-service": "^4.0.5",
"#vue/eslint-config-airbnb": "^5.0.0",
"babel-plugin-istanbul": "5.2.0",
"cache-loader": "^4.1.0",
"eventsource-polyfill": "0.9.6",
"image-webpack-loader": "^6.0.0",
"karma-webpack": "4.0.2",
"selenium-server": "3.141.59",
"url-loader": "^2.2.0",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-loader": "15.7.2",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.41.2",
"webpack-merge": "4.2.2"
},
"engines": {
"node": ">= 8.0.0",
"npm": ">= 5.0.0"
}
}
yarn version host app : 1.22.19
node version host app : v12.0.0
config file remote app :
import svgr from "vite-plugin-svgr"
import { defineConfig } from "vite"
import react from "#vitejs/plugin-react"
import * as path from "path"
import federation from "#originjs/vite-plugin-federation"
export default defineConfig({
plugins: [
svgr(),
react(),
federation({
name: "foo",
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App.tsx",
},
}),
],
build: {
target: "esnext",
assetsDir: "assets",
},
server: {
host: "0.0.0.0",
port: 5173,
},
})
package.json file of the remote app :
{
"name": "test",
"version": "1.0.0",
"description": "test",
"author": "test",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build:prod": "tsc && vite build",
"build:demo": "tsc && vite build --mode demo",
"preview": "vite preview",
"lint:check": "eslint \"./src/**/*.{ts,tsx}\"",
"lint:fix": "eslint --fix \"./src/**/*.{ts,tsx}\"",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write ."
},
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.0",
"#mui/x-date-pickers": "^5.0.0",
"#originjs/vite-plugin-federation": "^1.1.11",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i18next": "^21.8.14",
"moment": "^2.29.4",
"npm": "^8.19.2",
"react": "^18.2.0",
"react-charts": "=3.0.0-beta.30",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-i18next": "^11.18.1",
"react-number-format": "^5.0.1",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"#types/node": "^18.7.18",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.30.7",
"#typescript-eslint/parser": "^5.30.7",
"#vitejs/plugin-react": "^2.0.0",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1",
"sass": "^1.55.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vite-plugin-svgr": "^2.2.1"
}
}
yarn version of the remote app : 1.22.19
node version of the remote app : v12.0.0
Here is what I get when running the host app with "yarn serve" :
error logs when launching the app
My goal is then to be able to use the component App from the remote app in the host app by importing it like that :
Vue.component("App", () => import("foo/App"));

Receiving "Error: Can't walk dependency graph: ENOENT: no such file or directory" when run the test

I am trying to apply cucumber BDD with my cypress. But getting below error.
Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat 'C:\Users\admin\LegrandRX_Cucumber\process'
required by C:\Users\admin\LegrandRX_Cucumber\node_modules\cypress-cucumber-preprocessor\lib\getStepDefinitionsPaths.js
Here is my cypress.json file
{
"reporter": "cypress-mochawesome-reporter",
"reporterOptions": {
"reportDir": "cypress/Reports",
"charts": true,
"overwrite": false,
"html": false,
"json": true,
"reportPageTitle": "Legrande Cypress",
"reportFilename": "Legrande Cypress Test Report",
"embeddedScreenshots": true,
"inlineAssets": true
},
"defaultCommandTimeout": 30000,
"retries": {
"runMode": 1,
"openMode": 1
},
"video": false,
"scrollBehavior": "nearest",
"testFiles": "**/*.{feature,features}",
"chromeWebSecurity": false,
}
And Here is my package.json file
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"delete:reportFolder": "rm -rf mochawesome-report/",
"test:cli": "npm run delete:reportFolder && cypress run",
"merge:reports": "mochawesome-merge mochawesome-report/*.json > cypress-combined-report.json",
"create:html:report": "npm run merge:reports && marge --reportDir TestReport cypress-combined-report.json",
"cy:run": "cypress run",
"record-test": "cypress run --record --key 18415255-c402-40f0-b983-ab9c3bdf3dc4"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
},
"reporter": "cypress-mochawesome-reporter",
"reporterOptions": {
"reportDir": "cypress/Reports",
"charts": true,
"reportPageTitle": "My Test Suite",
"embeddedScreenshots": true,
"inlineAssets": true
},
"video": false,
"author": "weblylab",
"license": "ISC",
"devDependencies": {
"cypress": "^9.5.0",
"cypress-cucumber-preprocessor": "^4.3.1",
"cypress-file-upload": "^5.0.2",
"cypress-mochawesome-reporter": "^2.2.0",
"cypress-slack-reporter": "^1.2.1",
"cypress-xpath": "^1.6.1",
"faker": "^5.5.3",
"i": "^0.3.6",
"mocha": "^8.4.0",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0",
"mochawesome-report-generator": "^5.2.0",
"tsconfig-paths": "^3.9.0"
},
"dependencies": {
"#auth0/auth0-spa-js": "^1.13.6",
"#types/bluebird": "^3.5.33",
"#types/lodash": "^4.14.168",
"chai": "^4.3.0",
"cypress-iframe": "^1.0.1",
"cypress-skip-test": "^1.0.0",
"delay": "^5.0.0",
"Faker": "^0.7.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"resolve-url": "^0.2.1",
"save": "^2.4.0",
"source-map-resolve": "^0.6.0",
"urix": "^0.1.0",
"xlsx": "^0.17.0"
}
}
My folder structure, .js file and .feature file
And in my index.js file
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
on('file:preprocessor', cucumber())
}
Any idea what's wrong here?

Issue in path of deployed MERN app on heroku

getting Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'
package.json
"name": "google-contacts-backend",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon ./bin/www",
"test": "nyc _mocha --timeout 10000 --exit --report lcovonly -- -R spec",
"lint": "eslint --fix --config .eslintrc.json \"**/*.js\"",
"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
},
"dependencies": {
"axios": "^0.19.2",
"bcrypt": "^3.0.6",
"codacy-coverage": "^3.4.0",
"cookie-parser": "~1.4.3",
"cors": "^2.8.5",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"express": "~4.16.0",
"express-jwt": "^5.3.1",
"express-validator": "^6.2.0",
"googleapis": "^58.0.0",
"jsonwebtoken": "^8.5.1",
"mocha-lcov-reporter": "^1.3.0",
"moment": "^2.24.0",
"morgan": "~1.9.0",
"nodemailer": "^6.3.1"
},
"devDependencies": {
"chai": "^4.2.0",
"chai-http": "^4.3.0",
"eslint": "^6.5.1",
"mocha": "^6.2.2",
"nodemon": "^1.19.4",
"nyc": "^14.1.1"
}
}```
server.js
```app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
when I tried to check client folder directly in heroku bach, it was empty.

Getting "npm start" error when deploy Node JS app to Heroku server

I'm getting this error when i deploy my NodeJS app to Heroku server.
2019-08-27T05:54:03.597197+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-27T05:54:03.569746+00:00 heroku[web.1]: Process exited with status 1
2019-08-27T05:59:55.107447+00:00 heroku[web.1]: State changed from crashed to starting
2019-08-27T05:59:58.079934+00:00 heroku[web.1]: Starting process with command `npm start`
2019-08-27T06:00:00.687008+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-27T06:00:00.660988+00:00 heroku[web.1]: Process exited with status 1
2019-08-27T06:00:00.452248+00:00 app[web.1]: > realtime-chat#1.0.0 start /app
2019-08-27T06:00:00.452250+00:00 app[web.1]: > node index.js
2019-08-27T06:00:00.452252+00:00 app[web.1]:
2019-08-27T06:00:00.574510+00:00 app[web.1]: /app/index.js:1
2019-08-27T06:00:00.574514+00:00 app[web.1]: import express from "express";
2019-08-27T06:00:00.574517+00:00 app[web.1]: ^^^^^^^
2019-08-27T06:00:00.574519+00:00 app[web.1]:
2019-08-27T06:00:00.581327+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-08-27T06:00:00.581759+00:00 app[web.1]: npm ERR! errno 1
2019-08-27T06:00:00.582977+00:00 app[web.1]: npm ERR! realtime-chat#1.0.0 start: `node index.js`
2019-08-27T06:00:00.583139+00:00 app[web.1]: npm ERR! Exit status 1
2019-08-27T06:00:00.583436+00:00 app[web.1]: npm ERR!
2019-08-27T06:00:00.583640+00:00 app[web.1]: npm ERR! Failed at the realtime-chat#1.0.0 start script.
2019-08-27T06:00:00.583830+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-08-27T06:00:00.593702+00:00 app[web.1]:
My config: package.json file.
{
"name": "realtime-chat",
"version": "1.0.0",
"description": "sjc-realtimechat",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node index.js",
"postinstall": "bower cache clean && bower install"
},
"keywords": [
"sjc"
],
"author": "sjc-bui",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"bcrypt": "^3.0.6",
"bluebird": "^3.5.5",
"body-parser": "^1.19.0",
"bower": "^1.8.8",
"connect-mongo": "^3.0.0",
"cookie-parser": "^1.4.4",
"dotenv": "^8.0.0",
"ejs": "^2.6.2",
"emojione": "^4.5.0",
"express": "^4.17.1",
"express-flash": "0.0.2",
"express-session": "^1.16.2",
"express-validator": "^6.1.1",
"fs-extra": "^7.0.1",
"google-translate": "^2.2.0",
"http": "0.0.0",
"https": "^1.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"mongoose": "^5.6.4",
"multer": "^1.4.1",
"nodemailer": "^4.4.2",
"passport": "^0.4.0",
"passport-google-oauth": "^2.0.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"request": "^2.88.0",
"socket.io": "^2.2.0",
"uuid": "^3.3.2"
},
"devDependencies": {}
}
My config: Procfile file
web: npm start
i'm trying to run babel-node index.js on server. but got this error
npm ERR! realtime-chat#1.0.0 start: node index.js
I was searching to fix it but still got this error. Please help.
Update
Dependences already installed but still got "npm start" error.
Update all required dependencies in your package.json.
package.json should be something similar to this :
{
"name": "sample name",
"version": "version details goes here",
"description": "description goes here",
"main": "index.js",
"scripts": {
"start": "babel-node index.js",
"dev": "nodemon --exec babel-node index.js",
"test": "mocha --require babel-core/register test/*.js",
"compile": "babel src --out-dir .compiled --source-maps --watch",
"postinstall": "bower cache clean && bower install"
},
"dependencies": {
"express": "^4.9.8",
"other dependencies"
},
"engines": {
"node": "put node version details here"
}
}
update your bablerc file as below:
babelrc content
{
"presets": ["#babel/preset-env"]
}
Babel node is missing from your dependencies list.
also, see this below guide for more details:
https://devcenter.heroku.com/articles/deploying-nodejs
you cannot use
import express from "express"
this is ES-15 modules and Node.js does not support this. React supports this. node.js runtime has support for common.js modules which should be like this:
const express=require("express")

Resources