How to fix PM2 nodejs spawn babel-node ENOENT - node.js

I'm trying to run my nodejs project with PM2. Here's a part of my package.json
{
"scripts": {
"pretest": "yarn run test-cleanup",
"preinstall": "yarn global add pm2",
"build": "rm -rf dist && babel src --out-dir dist --source-maps --watch && cp -R src/utils/email/templates dist/utils/email/templates",
"build:tests": "babel tests --out-dir dist-tests",
"start": "pm2-runtime start ecosystem.prod.config.js",
"dev": "pm2 start ecosystem.dev.config.js && pm2 log",
"test": "concurrently 'yarn run test-not-ratelimit' 'yarn run test-ratelimit'",
"test:watch": "yarn run test-cleanup && yarn run test-not-ratelimit --watch --verbose",
"test-not-ratelimit": "ava --match='!*RateLimiter*' --fail-fast",
"test-ratelimit": "TESTING_RATELIMITER=true ava --match='*RateLimiter*' --fail-fast",
"test-cleanup": "node tests/_pretest-cleanup.js",
"prettier": "prettier --config ./.prettierrc --write \"**/*.js\"",
"lint": "prettier --check --config ./.prettierrc \"**/*.js\" && eslint ./src ./tests --max-warnings 0",
"lint-fix": "yarn prettier && eslint --fix ./src ./tests"
},
"heroku-run-build-script": true,
"devDependencies": {
"#babel/cli": "^7.7.4",
"#babel/core": "^7.7.4",
"#babel/node": "^7.7.4",
"#babel/preset-env": "^7.7.4",
"#babel/register": "^7.7.4",
"ava": "^2.4.0",
"babel-plugin-module-resolver": "^3.2.0",
"concurrently": "^5.0.0",
"eslint": "^6.7.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.7.0",
"eslint-import-resolver-babel-module": "^5.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.1",
"husky": "^3.1.0",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"rewiremock": "^3.13.9",
"sinon": "^7.5.0",
"supertest": "4.0.2"
},
"engines": {
"node": "12"
}
}
I run npm run dev and it show this error:
PM2 | at onErrorNT (internal/child_process.js:456:16)
PM2 | at processTicksAndRejections (internal/process/task_queues.js:80:21)
PM2 | 2019-12-03T10:08:05: PM2 log: App [api:0] starting in -fork mode-
PM2 | 2019-12-03T10:08:05: PM2 log: App [api:0] online
PM2 | 2019-12-03T10:08:05: PM2 error: Error: spawn babel-node ENOENT
PM2 | at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
PM2 | at onErrorNT (internal/child_process.js:456:16)
PM2 | at processTicksAndRejections (internal/process/task_queues.js:80:21)
PM2 | 2019-12-03T10:08:05: PM2 log: App [conductor:1] starting in -fork mode-
PM2 | 2019-12-03T10:08:05: PM2 log: App [conductor:1] online
PM2 | 2019-12-03T10:08:05: PM2 error: Error: spawn babel-node ENOENT
PM2 | at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
PM2 | at onErrorNT (internal/child_process.js:456:16)
PM2 | at processTicksAndRejections (internal/process/task_queues.js:80:21)
I tried install babel-cli and babel-node globally but still got same error. Any suggestion?
P/s: this project already run in my friend's Macbook, and I'm using Windows. May Os difference is a reason?

Related

heroku sh: 1: tsc: not found

this my scripts
{
"name": "fullstack-apollo-express-boilerplate-project",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"tsc": "./node_modules/typescript/bin/tsc",
"build": "rimraf ./build && tsc",
"dev": "nodemon",
"start": "npm run build && node build/index.js",
"codegen": "graphql-codegen --config ./codegen.yml",
"lint": "eslint . --ext .ts",
"lint-and-fix": "eslint . --ext .ts --fix",
"prettier-format": "prettier --config .prettierrc src/**/*.ts --write"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#graphql-codegen/cli": "^2.3.0",
"#graphql-codegen/typescript": "^2.4.1",
"#graphql-codegen/typescript-resolvers": "^2.4.2",
"#shopify/eslint-plugin": "^41.0.1",
"#types/bcryptjs": "^2.4.2",
"#types/cookie-parser": "^1.4.2",
"#types/mongoose-lean-virtuals": "^0.5.2",
"#types/nodemailer": "^6.4.4",
"#types/uuid": "^8.3.3",
"#typescript-eslint/eslint-plugin": "^5.5.0",
"#typescript-eslint/parser": "^5.5.0",
"eslint": "^8.4.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.5.1",
"ts-node": "^10.4.0",
"typescript": "^4.5.2"
},
"dependencies": {
"#types/express": "^4.17.13",
"#types/node": "^16.11.11",
"apollo-server-core": "^3.5.0",
"apollo-server-express": "^3.5.0",
"bcryptjs": "^2.4.3",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"crypto-random-string": "3.3.1",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-openid-connect": "^2.5.1",
"graphql": "^16.0.1",
"graphql-fields-list": "^2.2.4",
"graphql-parse-resolve-info": "^4.12.0",
"graphql-voyager": "^1.0.0-rc.31",
"i": "^0.3.7",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.1",
"mongoose": "^6.0.14",
"mongoose-lean-virtuals": "^0.9.0",
"nodemailer": "^6.7.2",
"rimraf": "^3.0.2"
}
}
when i do deploy i get error
2022-01-14T08:20:20.950719+00:00 app[web.1]: sh: 1: tsc: not found
2022-01-14T08:20:20.956238+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2022-01-14T08:20:20.956684+00:00 app[web.1]: npm ERR! syscall spawn
2022-01-14T08:20:20.956866+00:00 app[web.1]: npm ERR! file sh
2022-01-14T08:20:20.956950+00:00 app[web.1]: npm ERR! errno ENOENT
2022-01-14T08:20:20.961092+00:00 app[web.1]: npm ERR! fullstack-apollo-express-boilerplate-project#1.0.0 build: `rimraf ./build && tsc`
2022-01-14T08:20:20.961191+00:00 app[web.1]: npm ERR! spawn ENOENT
2022-01-14T08:20:20.961291+00:00 app[web.1]: npm ERR!
2022-01-14T08:20:20.961337+00:00 app[web.1]: npm ERR! Failed at the fullstack-apollo-express-boilerplate-project#1.0.0 build script.
2022-01-14T08:20:20.961377+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-01-14T08:20:20.961191+00:00 app[web.1]: npm ERR! spawn ENOENT
2022-01-14T08:20:20.961291+00:00 app[web.1]: npm ERR!
2022-01-14T08:20:20.961337+00:00 app[web.1]: npm ERR! Failed at the fullstack-apollo-express-boilerplate-project#1.0.0 build script.
2022-01-14T08:20:20.961377+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I can't figure out what's the reason Everything works fine for me.
If you don't have a Procfile, Heroku will run your start script as a web process.
Your start script runs your build script, and your build script compiles your app using tsc:
"build": "rimraf ./build && tsc",
"start": "npm run build && node build/index.js",
// ^^^^^^^^^^^^^
This causes Heroku to try to compile your app every time your dyno starts, and since typescript is (correctly) a devDependency, tsc isn't available at runtime.
It doesn't make much sense to have your start script call your build script: your app only needs to be compiled once.
Modify your start script so it doesn't call your build script:
"build": "rimraf ./build && tsc",
"start": "node build/index.js",
Heroku automatically runs your build script at deploy time, and now it won't try to re-compile it at runtime.

Why 'npm start' does not run the project in a browser with Node server.js at port :::3131 ? (JavaScript project)

I have a project written in JS around month ago. Since that time I didn't touch it.Now I wanna run the project again.
But when I type in Gitbash 'npm start' it's not opening the project in a browser.
It stucks at: 'node server.js' and doesn't go further.
Yesterday I had a problem with port 3131 where the project was deployed. I got information, the port was busy. So I used the 'netstat' command in CMD (windows) to find all open ports and then used 'taskkill' to terminate listening to port 3131.
But even after killing listening to that port, effect of 'npm start' was the same as today.
And it is happening with all my previous projects now. All of them where written during my online coding course in online coding School. I have finished it around a month ago.
Can it influence somehow at the issue with port 3131? Maybe I should change the port?
Important info: the project was deployed to Heroku, but couldn't work there. But even after deploying to Heroku 'npm start' was able to run project in the browser (a month ago).
BTW, 'npm run' looks like working fine, it runs all test etc.
Here is my package.json:
{
"name": "fer-07-project",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"lint": "eslint --fix --ext .js,.jsx .",
"init-project": "npm install && npm-run-all init:*",
"init:dirs": "mkdirp dist src/sass src/css src/vendor src/images src/js",
"init:files": "touch README.md src/index.html src/sass/style.scss src/js/script.js",
"init:gitignore": "curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -o .gitignore",
"init:gitignore:custom": "echo \"dist\" >> .gitignore",
"test": "npm-run-all test:*",
"test:html": "globstar nu-html-checker dist/*.html",
"test:js": "eslint src/js/ --fix",
"test:scss": "stylelint src/sass/",
"build": "npm-run-all build:* test",
"build:clean": "mkdirp dist && rm -r dist && mkdirp dist",
"build:copy": "copyfiles -a -u 1 -e \"**/sass/**/*\" -e \"**/.gitkeep\" \"src/**/*\" dist",
"build:sass": "node-sass --output-style compact -o dist/css src/sass",
"build:autoprefixer": "globstar autoprefixer-cli \"dist/css/*.css\"",
"build-dev": "npm-run-all build-dev:sass build:autoprefixer",
"build-dev:sass": "node-sass --output-style expanded --source-map true -o dist/css src/sass",
"server": "json-server --port 3131 --no-cors --delay 250 --watch dist/db/app.json",
"watch": "npm-run-all build build-dev -p watch:* server",
"watch:browsersync": "browser-sync start --server dist --files \"dist/**/*\" --ignore \"dist/db/**/*\"",
"watch:sassprefixer": "onchange \"src/sass/**/*.scss\" -- npm run build-dev",
"watch:copy": "onchange -e \"**/sass/**/*\" -e \"**/.gitkeep\" \"src/**/*\" -- copyfiles -a -u 1 {{changed}} dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"flatpickr": "^4.6.9",
"json-server": "^0.16.3",
"rangeslider-pure": "^0.4.11"
},
"devDependencies": {
"autoprefixer-cli": "^1.0.0",
"browser-sync": "^2.26.3",
"copyfiles": "^2.1.0",
"eslint": "^5.14.1",
"globstar": "^1.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"nu-html-checker": "^0.1.0",
"onchange": "^5.2.0",
"stylelint": "^9.10.1",
"stylelint-scss": "^3.5.4"
}
}
AND server.js:
/* global require, process */
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('dist/db/app.json');
const middlewares = jsonServer.defaults({
static: 'dist',
noCors: true
});
const port = process.env.PORT || 3131;
server.use(middlewares);
server.use(router);
server.listen(port);
HERE IS AN ISSUE IN GITBASH WHEN STARTING ANOTHER PROJECT WITH 'YARN START'
$ yarn start
yarn run v1.22.10
$ npm-run-all -p server:*
$ node server.js
$ webpack-dev-server --mode development --open --hot
events.js:292
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use :::3131
at Server.setupListenHandle [as _listen2] (net.js:1318:16)
at listenInCluster (net.js:1366:12)
at Server.listen (net.js:1452:7)
at Function.listen (C:\Users\kpych.LENOVO-KP\OneDrive\Pulpit\Nowy folder (4)\Project-12_Travel_agency\node_modules\express\lib\application.js:618:24)
at Object.<anonymous> (C:\Users\kpych.LENOVO-KP\OneDrive\Pulpit\Nowy folder (4)\Project-12_Travel_agency\server.js:32:10)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
Emitted 'error' event on Server instance at:
at emitErrorNT (net.js:1345:8)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '::',
port: 3131
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "server:api" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Gitbash npm start

Unable to run Gatsby application using npm run develop command

I am developing my first project with Gatsby and prismic. Today when i tried to start my development server i faced this error. I searched but i couldn't find similar errors anywhere. I am completely blocked on this one and have no clue what's causing this error.
extract from package.json :
"scripts": {
"build-dev": "env-cmd -f .env gatsby build",
"develop-dev": "env-cmd -f .env gatsby develop",
....
},
The error
ERROR
UNHANDLED REJECTION Union type PrismicAllDocumentTypes must define one or more member types.
Error: Union type PrismicAllDocumentTypes must define one or more member types.
- query-compiler.js:202 extractOperations
[site]/[gatsby]/dist/query/query-compiler.js:202:20
- query-compiler.js:176 processQueries
[site]/[gatsby]/dist/query/query-compiler.js:176:7
- query-compiler.js:96 compile
[vav_site]/[gatsby]/dist/query/query-compiler.js:96:19
- index.js:484 async module.exports
[site]/[gatsby]/dist/bootstrap/index.js:484:3
- develop.js:446 async module.exports
[site]/[gatsby]/dist/commands/develop.js:446:7
not finished extract queries from components - 0.675s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default#0.1.0 develop-dev: `env-cmd -f .env gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-default#0.1.0 develop-dev 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! C:\Users\Internal\AppData\Roaming\npm-cache\_logs\2020-03-10T07_36_38_243Z-debug.log
The terminal process terminated with exit code: 1
gatsby version : 2.19.34
react version : 16.13.0
prismic-reactjs version :1.2.0
Have you installed npm install -g gatsby-cli.
[Update] Prismic is not longer recommending the gatsby-source-prismic-graphql plugin.
Here's an article that'll help you migrating to the other one:
How to migrate a project from 'gatsby-source-prismic' to 'gatsby-source-prismic-graphql'
Error says that PrismicAllDocumentTypes has no children. You need to check that your prismic repo has at least one content type and, most important, you have at least one schema added to your codebase and gatsby-config.js:
module.exports = {
plugins: [
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `repositoryName`,
accessToken: `accessToken`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
schemas: {
page: require("./src/schemas/page.json"),
},
},
},
],
}
using my own prismic source gatsby package.json file:
{
"name": "gatsby-VARIABLE-prismic",
"description": "YOUR DESCRIPTION",
"private": true,
"license": "MIT",
"version": "0.0.0",
"author": "YOURNAME <YOUR#EMAIL.ADDRESS> (#USERNAME)",
"scripts": {
"build": "gatsby build",
"dev": "gatsby develop -o",
"develop": "gatsby develop",
"serve": "gatsby serve",
"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
"lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
"lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
"format": "prettier \"**/*.md \" --write",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
"test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
"test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
},
"dependencies": {
"#emotion/core": "^10.0.28",
"#emotion/styled": "^10.0.27",
"#emotion/styled-base": "^10.0.28",
"#reach/skip-nav": "^0.8.5",
"emotion": "^10.0.27",
"emotion-server": "^10.0.27",
"emotion-theming": "^10.0.27",
"gatsby": "^2.19.23",
"gatsby-image": "^2.2.41",
"gatsby-plugin-emotion": "^4.1.22",
"gatsby-plugin-google-analytics": "^2.1.36",
"gatsby-plugin-lodash": "^3.1.20",
"gatsby-plugin-manifest": "^2.2.42",
"gatsby-plugin-netlify": "^2.1.33",
"gatsby-plugin-offline": "^3.0.35",
"gatsby-plugin-react-helmet": "^3.1.22",
"gatsby-plugin-sharp": "^2.4.5",
"gatsby-plugin-sitemap": "^2.2.27",
"gatsby-plugin-typography": "^2.3.22",
"gatsby-source-prismic": "^2.2.0",
"gatsby-transformer-sharp": "^2.3.16",
"lodash": "^4.17.15",
"prismic-dom": "^2.1.0",
"prismjs": "^1.19.0",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.1",
"react-typography": "^0.16.19",
"typeface-lora": "^0.0.72",
"typeface-source-sans-pro": "^1.1.5",
"typography": "^0.16.19"
},
"devDependencies": {
"#testing-library/cypress": "^5.1.2",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.0",
"cypress": "^3.8.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.5.0",
"gatsby-cypress": "^0.2.22",
"prettier": "^1.19.1",
"start-server-and-test": "^1.10.9"
},
"keywords": [
"gatsby",
"starter",
"prismic",
"typography",
"minimal",
"gatsby-starter"
]
}
in your gatsby-condig.js:
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'gatsby-starter-prismic',
accessToken: `${process.env.API_KEY}`,
// Get the correct URLs in blog posts
linkResolver: () => post => `/${post.uid}`,
// PrismJS highlighting for labels and slices
htmlSerializer: () => prismicHtmlSerializer,
// Remove this config option if you only have one language in your Prismic repository
lang: 'en-gb',
},
},
you are probbly using .dotenv - a way to pass secret keys outside of publc ic repo's.
in your root directory create a file named " .env.develop " and a second: ".env.prod "
.env.develop file content:
API_KEY = COPYPASE YOUR API KEY HERE

Deployment to heroku [Error: spawn babel-node ENOENT]

Project works perfectly on dev machine. I've already spent more than 5 hours:
trying out different configurations using bash 'start' scripts on heroku remotely
installing babel-cli and babel-preset-env as dependencies instead of devDependencies
reading through heroku documentation about local builds, trying out
them
disabling dotenv in production
What are your suggestions / solution to this babel-node and heroku incompatibility? Maybe they're disabling it, since it makes more load on their server memory? I've written all my files in ES6 and I tried to rewrite them to old syntax, but that's almost impossible. Is there a way to make babel work on server-side for heroku?
Heroku application log:
2018-05-01T12:08:44.677261+00:00 heroku[web.1]: Starting process with command `npm start`
2018-05-01T12:08:47.873964+00:00 app[web.1]: [heroku-exec] Starting
2018-05-01T12:08:48.920661+00:00 app[web.1]:
2018-05-01T12:08:48.920707+00:00 app[web.1]: > rearn#1.0.0 start /app
2018-05-01T12:08:48.920710+00:00 app[web.1]: > cross-env NODE_ENV=production babel-node server/server.js
2018-05-01T12:08:48.920712+00:00 app[web.1]:
2018-05-01T12:08:49.196690+00:00 app[web.1]: events.js:183
2018-05-01T12:08:49.196703+00:00 app[web.1]: throw er; // Unhandled 'error' event
2018-05-01T12:08:49.196704+00:00 app[web.1]: ^
2018-05-01T12:08:49.196706+00:00 app[web.1]:
2018-05-01T12:08:49.196709+00:00 app[web.1]: Error: spawn babel-node ENOENT
2018-05-01T12:08:49.196710+00:00 app[web.1]: at _errnoException (util.js:1024:11)
2018-05-01T12:08:49.196712+00:00 app[web.1]: at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
2018-05-01T12:08:49.196714+00:00 app[web.1]: at onErrorNT (internal/child_process.js:372:16)
2018-05-01T12:08:49.196717+00:00 app[web.1]: at _combinedTickCallback (internal/process/next_tick.js:138:11)
2018-05-01T12:08:49.196718+00:00 app[web.1]: at process._tickCallback (internal/process/next_tick.js:180:9)
2018-05-01T12:08:49.196720+00:00 app[web.1]: at Function.Module.runMain (module.js:678:11)
2018-05-01T12:08:49.196721+00:00 app[web.1]: at startup (bootstrap_node.js:187:16)
2018-05-01T12:08:49.196723+00:00 app[web.1]: at bootstrap_node.js:608:3
2018-05-01T12:08:49.206967+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-05-01T12:08:49.208660+00:00 app[web.1]: npm ERR! errno 1
2018-05-01T12:08:49.211774+00:00 app[web.1]: npm ERR! rearn#1.0.0 start: `cross-env NODE_ENV=production babel-node server/server.js`
2018-05-01T12:08:49.212391+00:00 app[web.1]: npm ERR! Exit status 1
2018-05-01T12:08:49.212731+00:00 app[web.1]: npm ERR!
2018-05-01T12:08:49.212944+00:00 app[web.1]: npm ERR! Failed at the rearn#1.0.0 start script.
2018-05-01T12:08:49.213151+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-05-01T12:08:49.220087+00:00 app[web.1]:
2018-05-01T12:08:49.220400+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-05-01T12:08:49.220579+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-05-01T12_08_49_214Z-debug.log
2018-05-01T12:08:49.315806+00:00 heroku[web.1]: State changed from starting to crashed
2018-05-01T12:08:49.301459+00:00 heroku[web.1]: Process exited with status 1
package.json:
{
"name": "rearn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "8.9.3",
"npm": "5.6.0"
},
"scripts": {
"build": "next build",
"start": "cross-env NODE_ENV=production babel-node server/server.js",
"test": "eslint pages components lib",
"dev": "nodemon server/server.js --watch server --exec babel-node server/server.js",
"port": "cross-env PORT=4000 npm start",
"prod": "yarn build && cross-env NODE_ENV=production babel-node server/server.js",
"precommit": "yarn test",
"prepush": "yarn test",
"heroku-postbuild": "YARN_PRODUCTION=false yarn install && yarn build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-sass": "^0.1.2",
"axios": "^0.18.0",
"bootstrap": "4.0.0",
"bootstrap-material-design": "^4.1.1",
"connect-mongo": "^2.0.1",
"cross-env": "^5.1.4",
"dotenv": "^5.0.1",
"express": "^4.16.3",
"express-session": "^1.15.6",
"express-useragent": "^1.0.12",
"jquery": "^3.3.1",
"material-ui": "^0.20.0",
"mongoose": "^5.0.15",
"next": "5.1.0",
"next-offline": "^2.5.0",
"next-redux-wrapper": "^1.3.5",
"node-sass": "^4.8.3",
"passport": "^0.4.0",
"passport-google-oauth": "^1.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-popper": "^0.10.1",
"react-redux": "^5.0.7",
"react-reveal": "^1.2.1",
"react-transition-group": "^2.3.0",
"redux": "^4.0.0",
"redux-form": "^7.3.0",
"redux-thunk": "^2.2.0",
"styled-jsx": "^2.2.6",
"workbox-background-sync": "^3.0.1"
},
"browserslist": [
"> 1%"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"eslint": "4.9.0",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-compat": "^2.2.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-react": "7.4.0",
"husky": "^0.14.3"
}
}
Solved. Actually I was removing and installing babel-cli and babel-preset-env in bash and somehow heroku didn't update package.json remotely? Why? Solution:
installing babel-cli and babel-preset-env as dependencies instead of
devDependencies (actually babel-cli only is enough for next.js, as it uses latest babel config).
Found this post, since i had a similar problem.
moved the whole block of
"#babel/cli": "7.5.5",
"#babel/core": "7.5.5",
"#babel/node": "7.5.5",
"#babel/plugin-transform-runtime": "7.5.5",
"#babel/preset-env": "7.5.5",
"#babel/runtime": "7.5.5",
from devDepenencies to the dependencies section of package.json = problem solved for now, maybe not the final perfect solution, tough

MEAN NPM Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin' Error

I am having a little bit of problem upgrading to latest webpack. I have already checked the following threads and found that the cause of the error is a deprecated class.
Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
Webpack 4 migration CommonsChunkPlugin
The only problem is that I am not using this class in my code but even though I updated it, webpack itself is referencing it somewhere.
Note: I have already tried removing the node_modules, clearing cache and reinstalling
I generated the package.json through MEAN and the start script that is in the package.json use is referencing a bunch of webpack scripts which might be the issue.
One thing that is interesting is the following warning, tho, I am not sure if it is related:
preload-webpack-plugin#2.3.0 requires a peer of webpack#^3.2.0 but none is installed. You must install peer dependencies yourself.
It is saying a version higher then 3.2.0 is required (I have 4.2.0). I am not sure if it is because it is not recognizing the WebpackV4 or if V4 is just not backward compatible
current node version: 9.8.0
I appreciate any ideas/suggestions. package.json and the full error is below. Please let me know if I can provide any further info
[0] > Mean#2.0.1 server:dev /Users/Sinan/Desktop/cllctroffcl
[0] > npm run webpack-dev-server -- --config config/webpack.dev.js --open --
progress --profile --watch --content-base src/
[0]
[0]
[0] > Mean#2.0.1 webpack-dev-server /Users/Sinan/Desktop/cllctroffcl
[0] > node --max_old_space_size=4096 node_modules/webpack-dev-
server/bin/webpack-dev-server.js "--config" "config/webpack.dev.js" "--open" "--progress" "--profile" "--watch" "--content-base" "src/"
[0]
[1] PC listening on 8888
[0] module.js:545
[0] throw err;
[0] ^
[0]
[0] Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
[0] at Function.Module._resolveFilename (module.js:543:15)
[0] at Function.Module._load (module.js:470:25)
[0] at Module.require (module.js:593:17)
[0] at require (internal/module.js:11:18)
[0] at Object.<anonymous>
(/Users/Sinan/Desktop/cllctroffcl/config/webpack.common.js:16:28)
[0] at Module._compile (module.js:649:30)
[0] at Object.Module._extensions..js (module.js:660:10)
[0] at Module.load (module.js:561:32)
[0] at tryModuleLoad (module.js:501:12)
[0] at Function.Module._load (module.js:493:3)
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! Mean#2.0.1 webpack-dev-server: `node --max_old_space_size=4096
node_modules/webpack-dev-server/bin/webpack-dev-server.js "--config"
"config/webpack.dev.js" "--open" "--progress" "--profile" "--watch" "--
content-base" "src/"`
[0] npm ERR! Exit status 1
[0] npm ERR!
npm ERR! Failed at the Mean#2.0.1 webpack-dev-server script.
[0] npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
[0]
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR! /Users/Sinan/.npm/_logs/2018-03-26T03_43_37_514Z-debug.log
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! Mean#2.0.1 server:dev: `npm run webpack-dev-server -- --config
config/webpack.dev.js --open --progress --profile --watch --content-base
src/`
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the Mean#2.0.1 server:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
[0]
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR! /Users/Sinan/.npm/_logs/2018-03-26T03_43_37_532Z-debug.log
[0] npm run server:dev exited with code 1
Package.json
{
"name": "Mean",
"version": "2.0.1",
"description": "A MEAN stack framework using Angular Webpack Starter kit - featuring Angular (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack",
"keywords": [
"angular",
"angular2",
"angular4",
"webpack",
"typescript"
],
"author": "Lior Kesos <lior#linnovate.net>",
"homepage": "http://mean.io",
"license": "MIT",
"scripts": {
"build:aot:prod": "npm run clean:dist && npm run clean:aot && cross-env BUILD_AOT=1 npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build:aot": "npm run build:aot:prod",
"build:dev": "npm run clean:dist && npm run webpack -- --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
"ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
"ci:nobuild": "npm run lint && npm test && npm run e2e",
"ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
"ci:travis": "npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
"ci": "npm run ci:testall",
"clean:dll": "npm run rimraf -- dll",
"clean:aot": "npm run rimraf -- compiled",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
"e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
"e2e": "npm-run-all -p -r server:prod:ci protractor",
"github-deploy:dev": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
"github-deploy:prod": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
"github-deploy": "npm run github-deploy:dev",
"lint": "npm run tslint \"src/**/*.ts\"",
"node": "node",
"postinstall": "npm run webdriver:update",
"postversion": "git push && git push --tags",
"preclean:install": "npm run clean",
"preversion": "npm test",
"protractor": "protractor",
"protractor:delay": "sleep 3 && npm run protractor",
"protractor:live": "protractor --elementExplorer",
"rimraf": "rimraf",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
"server:prod": "http-server dist -c-1 --cors",
"server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "concurrently \"npm run server:dev\" \"nodemon --watch server server-start.js\" ",
"start:prod": "NODE_ENV=production node server-start.js",
"test": "npm run lint && karma start",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webdriver-manager": "webdriver-manager",
"webdriver:start": "npm run webdriver-manager start",
"webdriver:update": "webdriver-manager update",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"dependencies": {
"#angular/animations": "~5.2.9",
"#angular/cdk": "~5.2.4",
"#angular/common": "^5.0.0",
"#angular/compiler": "~5.2.9",
"#angular/core": "^5.0.0",
"#angular/forms": "~5.2.9",
"#angular/http": "~5.2.9",
"#angular/material": "~5.2.4",
"#angular/platform-browser": "~5.2.9",
"#angular/platform-browser-dynamic": "~5.2.9",
"#angular/platform-server": "~5.2.9",
"#angular/router": "~5.2.9",
"#angularclass/hmr": "~2.1.3",
"#angularclass/hmr-loader": "~3.0.2",
"#ng-select/ng-select": "^0.30.1",
"#reactivex/rxjs": "^5.4.3",
"angular-in-memory-web-api": "~0.6.0",
"angular2-universal": "2.1.0-rc.1",
"apollo-angular": "^1.0.1",
"apollo-client": "^1.4.2",
"app-root-path": "^2.0.1",
"babel-cli": "^6.24.1",
"body-parser": "^1.17.2",
"casual": "^1.5.14",
"cookie-parser": "^1.4.3",
"core-js": "^2.4.1",
"cors": "^2.8.3",
"dotenv": "^5.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.6",
"express-jwt": "^5.3.0",
"express-validation": "^1.0.2",
"express-winston": "^2.4.0",
"graphql": "^0.13.2",
"graphql-server-express": "latest",
"graphql-tag": "^2.2.2",
"graphql-tools": "^2.23.1",
"hammerjs": "^2.0.8",
"helmet": "^3.6.1",
"hll": "^1.1.0",
"http-server": "^0.11.1",
"http-status": "^1.0.1",
"ie-shim": "^0.1.0",
"innograph": "git://github.com/linnovate/innograph.git#devel",
"joi": "^13.1.2",
"jsonwebtoken": "^8.1.0",
"long": "^4.0.0",
"material": "^0.2.6",
"method-override": "^2.3.9",
"mongoose": "^5.0.11",
"mongoose-double": "0.0.1",
"morgan": "^1.8.2",
"ng2-go-top-button": "^4.1.0",
"ngx-carousel": "^1.3.5",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"preboot": "^5.0.0-rc.10",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.3",
"sockjs-client": "^1.1.4",
"winston": "^2.3.1",
"zone.js": "latest"
},
"devDependencies": {
"#angular/compiler-cli": "~5.2.9",
"#ngtools/webpack": "^1.10.2",
"#types/hammerjs": "^2.0.34",
"#types/jasmine": "2.8.6",
"#types/node": "^9.6.0",
"#types/source-map": "^0.5.0",
"#types/uglify-js": "^3.0.0",
"#types/webpack": "^4.1.2",
"add-asset-html-webpack-plugin": "^2.1.3",
"angular2-template-loader": "^0.6.2",
"assets-webpack-plugin": "^3.5.1",
"awesome-typescript-loader": "~4.0.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"codelyzer": "~4.2.1",
"concurrently": "^3.4.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.0",
"css-loader": "^0.28.0",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^1.1.11",
"find-root": "^1.0.0",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^3.1.0",
"imports-loader": "^0.8.0",
"inline-manifest-webpack-plugin": "^3.0.1",
"istanbul-instrumenter-loader": "3.0.0",
"jasmine-core": "^3.1.0",
"json-loader": "^0.5.4",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "~3.0.0",
"ng-router-loader": "^2.1.0",
"ngc-webpack": "~4.1.2",
"node-sass": "^4.5.2",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.2",
"optimize-js-plugin": "0.0.4",
"parse5": "^4.0.0",
"preload-webpack-plugin": "^2.3.0",
"protractor": "^5.1.1",
"raw-loader": "0.5.1",
"rimraf": "~2.6.1",
"sass-loader": "^6.0.3",
"script-ext-html-webpack-plugin": "^2.0.1",
"source-map-loader": "^0.2.1",
"string-replace-loader": "~2.1.1",
"style-loader": "~0.20.3",
"to-string-loader": "^1.1.5",
"ts-node": "~5.0.1",
"tslib": "^1.6.1",
"tslint": "~5.9.1",
"tslint-loader": "^3.5.2",
"typedoc": "^0.11.1",
"typescript": "~2.7.2",
"url-loader": "~1.0.1",
"webpack": "~4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-middleware": "~3.0.1",
"webpack-dev-server": "^3.1.1",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "~4.1.0"
},
"repository": {
"type": "git",
"url": "https://github.com/AngularClass/angular-starter.git"
},
"bugs": {
"url": "https://github.com/AngularClass/angular-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
I just realized this was not a very well thought question however since other people might run into this I will keep the question up.
The problem is that config/webpack.common.js is out of date and tries to call on this deprecated class.
For a temporary work around is to comment out the following sections from config/webpack.common.js
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
AND
new CommonsChunkPlugin({
name: 'vendor',
chunks: ['main'],
minChunks: module => /node_modules/.test(module.resource)
}),
new ScriptExtHtmlWebpackPlugin({
sync: /polyfill|vendor/,
defaultAttribute: 'async',
preload: [/polyfill|vendor|main/],
prefetch: [/chunk/]
As of webpack4, tsConfigPath, is required to be specified.
You will also need to go under
ngcWebpack.NgcWebpackPlugin
and add
tsConfigPath: 'tsconfig.webpack.json',
ScriptExtHtmlWebpack seems to be an external library they use, which is also broken under webpack 4.
Note: Obviously commenting out all these things will have effects on your project. Just want to repeat once again that this is a temporary work around if you absolutely must use web pack 4.
I created a feature request that you can track here
Hopefully the config file will be updated as the transition to MEAN 2 takes place
Hope this helps

Resources