Error while deploying a node app on Heroku - node.js

I used git push heroku command to push my node app to heroku but it shows following errors.
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote: parse error: Expected another key-value pair at line 17,
column 3
remote: ! Unable to parse package.json
remote:
remote:
remote: -----> Build failed
remote: parse error: Expected another key-value pair at line 17,
column 3
remote: parse error: Expected another key-value pair at line 17,
column 3
remote:
remote: We're sorry this build is failing! You can troubleshoot
common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-
node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to guarded-ravine-41633.
remote:
To https://git.heroku.com/guarded-ravine-41633.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/guarded-
ravine-41633.git'
I don't know what i am doing wrong. If anyone could correct me than that would be very appreciated.
This is my package.json file.
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Nikhil <nikhilgupta6532#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start
test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs
test/e2e/specs",
"start":"node server.js",
},
"engines": {
"node": ">= 8.2.1",
"npm": ">= 5.3.0"
},
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.6.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"cross-env": "^5.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I am currently using Vue.js inside my project along with Node.js and sockets.io with database as Mongodb.

Reading though the error you provided, it mentions that it during your build process, it expected another key-value pair on line 17 of package.json.
I ran your package.json through a JSON and found a few issues, as follows -
Parse error on line 11: You should remove the line break between lines 11 and 12.
"unit": "cross-env BABEL_ENV=test karma start test / unit / karma.conf.js--single - run ",
Parse error on line 14:: You should remove the line break between lines 14 and 15.
"lint": "eslint --ext .js,.vue src test/unit/specstest / e2e / specs ",
Parse error on line 15:: You should remove the comma, since this is the last property of scripts.
"start": "node server.js"
Duplicate key 'start' on line 15:: *You need to decide whether you want your start script to be
"start": "node build/dev-server.js", OR "start": "node build/dev-server.js",
Fixing these should solve your build errors.
Corrected package.js file
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Nikhil <nikhilgupta6532#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test / unit / karma.conf.js--single - run ",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test / e2e / specs ",
"start": "node server.js"
},
"engines": {
"node": ">= 8.2.1",
"npm": ">= 5.3.0"
},
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.6.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"cross-env": "^5.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Check this out you have error . Json error syntax
errors
"unit": all test in same line
same for "lint"
and remove two start and also removed comma in line 17
new file
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Nikhil <nikhilgupta6532#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"start":"node server.js"
},
"engines": {
"node": ">= 8.2.1",
"npm": ">= 5.3.0"
},
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.6.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"cross-env": "^5.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Related

Cannot find module 'webpack/lib/web/FetchCompileWasmTemplatePlugin'

I have a Vue application which is running live and node version is 8. I have clone this application, I deleted the package.lock file and node_module folder, and run npm i, I have node 12.18 installed on my mechine, after successful installation, I try to run appplication by npm run dev, but getting error:
ERROR Failed to compile with 1 errors 11:14:59 AM
error in ./node_modules/pdfjs-dist/build/pdf.worker.js
Module build failed: Error: Cannot find module 'webpack/lib/web/FetchCompileWasmTemplatePlugin'
Require stack:
- C:\xampp\htdocs\easy-portal\node_modules\worker-loader\dist\index.js
- C:\xampp\htdocs\easy-portal\node_modules\worker-loader\dist\cjs.js
- C:\xampp\htdocs\easy-portal\node_modules\loader-runner\lib\loadLoader.js
- C:\xampp\htdocs\easy-portal\node_modules\loader-runner\lib\LoaderRunner.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack\lib\NormalModule.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack\lib\NormalModuleFactory.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack\lib\Compiler.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack\lib\webpack.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack-dev-server\lib\Server.js
- C:\xampp\htdocs\easy-portal\node_modules\webpack-dev-server\bin\webpack-dev-server.js
here is my package.json file:
{
"name": "app",
"version": "1.0.0",
"description": "ATS System",
"author": "N4TECH",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "node server.js",
"build:dev": "node build/dev.js",
"build:prod": "node build/build.js"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"bootstrap-vue": "^1.4.0",
"chalk": "^2.0.1",
"css-loader": "^0.28.8",
"debounce": "^1.1.0",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"pusher-js": "^4.3.1",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"tributejs": "^3.5.3",
"vee-validate": "^2.0.0-beta.17",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.1",
"vue-html5-editor": "^1.1.1",
"vue-i18n": "^8.1.0",
"vue-pdf": "^3.2.0",
"vue-router": "^3.0.1",
"vue-scrollto": "^2.11.0",
"vue-social-sharing": "^2.3.3",
"vue-style-loader": "^3.0.3",
"vue-truncate-collapsed": "^1.3.0",
"vue2-datatable-component": "^2.1.26",
"vuedraggable": "^2.16.0",
"vuetify": "^1.2.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"compression-webpack-plugin": "^1.1.6",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"worker-loader": "^3.0.7"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Any help would be highly appreciable.
I fixed it by update webpack to webpack5

Webpack Broken after installing vuex-persistedstate

I have broken my webpack installation after installing vuex-persistedstate. I have removed the node modules folder and the package-lock.json file and re-installed, but I am still receiving the following error when trying to run my project:
npm ERR! client#1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.0.0 dev script.
I have deleted the /node_modules folder and package-lock.json file, and ran the following commands:
npm install
npm run build
npm start
My package.json file contains the following packages:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.10.2",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0",
"jquery": "^3.5.1",
"popper.js": "^1.15.0",
"vue": "^2.5.2",
"vue-cookies": "^1.5.13",
"vue-js-modal": "^1.3.31",
"vue-router": "^3.0.1",
"vuejs-dialog": "^1.4.1",
"vuex": "^3.5.1",
"vuex-persistedstate": "^3.0.1",
"web3": "^1.2.1"
},
"devDependencies": {
"#types/node": "^12.7.5",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^6.0.3",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^3.1.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"inject-loader": "^3.0.0",
"karma": "^5.1.1",
"karma-coverage": "^2.0.3",
"karma-mocha": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mini-css-extract-plugin": "^0.8.0",
"mocha": "^8.0.1",
"nightwatch": "^1.3.7",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"style-loader": "^1.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^2.1.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.44.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]

Gitlab CI/CD: Cannot find module: 'src/css/index.css'. Make sure this package is installed

I'm trying to build my React Webpack app on Gitlabs CI/CD.
Within my Webpack configuration I use the Sentry plugin to send sourcemaps so I am trying to build my app in the CI/CD container.
Here is my gitlab-ci.yml
image: node
stages:
- lint
- prepare
eslint:
stage: lint
script:
# Install eslint
- |
npm install eslint \
eslint-plugin-react \
babel-eslint
# Run eslint
- npm run lint
flow:
stage: lint
script:
# install flow
- yarn add flow-bin
- yarn run lint
sentry:
stage: prepare
script:
- npm i
environment:
name: production
only:
- master
and here is my package.json
"dependencies": {
"#babel/core": "7.1.6",
"#sentry/browser": "^4.5.1",
"#sentry/webpack-plugin": "^1.6.2",
"#svgr/webpack": "2.4.1",
"axios": "^0.18.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"express": "^4.16.4",
"express-http-proxy": "^1.5.0",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"humps": "^2.0.1",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"js-cookie": "^2.2.0",
"mini-css-extract-plugin": "0.4.3",
"moment": "^2.24.0",
"normalizr": "^3.3.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.3.1",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.0",
"react-app-polyfill": "^0.2.0",
"react-circle": "^1.1.1",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.8.0",
"react-ga": "^2.5.7",
"react-grid-system": "^4.4.1",
"react-helmet": "^5.2.0",
"react-keyboard-event-handler": "^1.4.1",
"react-media": "^1.9.2",
"react-player": "^1.8.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-slack-feedback": "^2.0.4",
"react-transition-group": "^2.5.3",
"redux": "^4.0.1",
"redux-api-middleware": "^3.0.1",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"scrollto-with-animation": "^4.5.2",
"signale": "^1.4.0",
"striptags": "^3.1.1",
"style-loader": "0.23.0",
"styled-components": "^4.1.3",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3",
},
"scripts": {
"postinstall": "cross-env NODE_ENV=production npm run build && patch-package",
"start": "node server.js",
"dev": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"storybook": "start-storybook -p 9001 -c .storybook",
"lint": "eslint ./src ./stories",
"flow": "flow ./src"
},
"devDependencies": {
"#storybook/addon-info": "^4.1.11",
"#storybook/addon-knobs": "^4.1.6",
"#storybook/addon-notes": "^4.1.6",
"#storybook/react": "^4.1.6",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "^8.0.4",
"babel-plugin-named-asset-import": "^0.3.0",
"babel-preset-react-app": "^7.0.0",
"eslint": "5.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "^3.2.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.90.0",
"husky": "^1.3.1",
"patch-package": "^6.0.4",
"prettier": "^1.15.3",
"prop-types": "^15.7.2",
"redux-devtools-extension": "^2.13.7"
},
It builds fine on locally but not in the CI/CD runner.
In my application I had and .env file setting the NODE_ENV
After messing around for ages I had to set the NODE_ENV when I executed npm run build
"scripts": {
"postinstall": "export NODE_ENV=production NODE_PATH=. && npm run build && patch-package"
}

Jest runs no tests with React application

I have the following simple test in a t.test.js file in my React repo
test('sum', () => {
expect(1+1).toBe(3);
});
I followed the steps to set up Jest using the official guide.
However, when I run npm test, nothing happens. This is the output I get before Jest exits:
> # test
> jest
Using Jest CLI v0.8.2, jasmine1
What could be the problem? No tests are being run in my repository. Here is a dump of my package.json if necessary:
{
"private": true,
"engines": {
"node": ">=5.0 <6",
"npm": ">=3.3 <4"
},
"dependencies": {
"#google/maps": "^0.4.5",
"auth0-lock": "^10.24.3",
"autosuggest-highlight": "^3.1.1",
"aws-sdk": "^2.202.0",
"babel-polyfill": "6.9.1",
"babel-runtime": "6.9.2",
"bluebird": "3.1.1",
"body-parser": "^1.18.2",
"classnames": "2.2.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.3",
"cron": "^1.3.0",
"dotenv": "^2.0.0",
"downloadjs": "^1.4.7",
"eventemitter3": "1.1.1",
"express": "4.13.3",
"express-formidable": "^1.0.0",
"express-jwt": "^5.1.0",
"fastclick": "1.0.6",
"fbjs": "0.5.1",
"fetch-jsonp": "^1.1.3",
"flux": "2.1.1",
"formsy-react": "^0.19.5",
"front-matter": "2.0.1",
"fuse.js": "^2.5.0",
"google-libphonenumber": "^3.0.12",
"google-map-react": "^0.27.0",
"google-maps-react": "^1.1.2",
"history": "1.16.0",
"intercom-client": "^2.9.2",
"isomorphic-style-loader": "^4.0.0",
"jade": "1.11.0",
"json-loader": "^0.5.7",
"mailchimp-api-v3": "^1.8.0",
"markdown": "^0.5.0",
"mixpanel": "^0.8.0",
"mixpanel-browser": "^2.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"mongodb": "2.1.7",
"morgan": "^1.9.0",
"node-fetch": "1.3.3",
"normalize.css": "3.0.3",
"passport-auth0": "^0.6.1",
"passport-http": "^0.3.0",
"rc-progress": "^2.2.5",
"react": "^0.14.9",
"react-addons-create-fragment": "^0.14.8",
"react-autosuggest": "^9.3.4",
"react-day-picker": "^2.4.0",
"react-dom": "^0.14.9",
"react-redux": "^4.4.1",
"react-routing": "0.0.6",
"react-scrollable-anchor": "^0.5.0",
"react-share": "^1.19.1",
"react-stripe-checkout": "^1.8.0",
"redux": "^3.3.1",
"sendgrid": "^2.0.0",
"source-map-support": "0.4.0",
"stripe": "^4.25.0",
"tempy": "^0.2.1",
"twilio": "^2.9.1",
"twitter": "^1.7.0",
"underscore": "^1.8.3",
"whatwg-fetch": "0.10.1",
"xhr2": "^0.1.3"
},
"devDependencies": {
"assets-webpack-plugin": "^3.4.0",
"autoprefixer": "^6.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^6.0.4",
"babel-jest": "^22.4.1",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-rewire": "^1.0.0-rc-3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-constant-elements": "^6.8.0",
"babel-plugin-transform-react-inline-elements": "^6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.2.7",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-node5": "^11.1.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.26.0",
"babel-template": "^6.26.0",
"babel-types": "^6.26.0",
"browser-sync": "^2.23.6",
"css-loader": "^0.28.10",
"csscomb": "^3.1.8",
"del": "^2.2.0",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^2.1.1",
"eslint-loader": "^1.1.1",
"eslint-plugin-react": "^3.11.3",
"extend": "^3.0.0",
"file-loader": "^0.8.5",
"gaze": "^0.5.2",
"git-repository": "^0.1.1",
"glob": "^6.0.1",
"jest": "^22.4.2",
"jest-cli": "^0.8.2",
"jscs": "^2.7.0",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"postcss": "^5.2.18",
"postcss-import": "^7.1.3",
"postcss-loader": "^0.8.0",
"precss": "^1.3.0",
"react-test-renderer": "^16.2.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "1.2.0",
"replace": "^0.3.0",
"superagent": "^3.8.2",
"supertest": "^3.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-hot-middleware": "^2.21.0",
"webpack-middleware": "^1.5.1",
"webpack-node-externals": "^1.6.0"
},
"babel": {
"presets": [
"react",
"node5",
"stage-0"
],
"env": {
"test": {
"plugins": [
"rewire"
]
}
},
"plugins": [
"transform-class-properties"
]
},
"jest": {
"rootDir": "./src"
},
"scripts": {
"lint": "eslint src tools && jscs src tools",
"csslint": "csscomb src/components --lint --verbose",
"csscomb": "csscomb src/components --verbose",
"test": "jest",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
"build": "babel-node tools/run build",
"deploy": "babel-node tools/run deploy",
"start": "babel-node tools/run start"
}
}

Deploy error on Heroku with /app/karma.config.js

I got a React project with node.js, and want to deploy it on Heroku, I connect Heroku with my github repository: https://github.com/yeziyqf/SecureProgramConc
When the project building on Heroku, I got following error:
-----> Running Node.js buildpack tests...
essential-react#0.3.0 test /app
PHANTOMJS_BIN=./node_modules/.bin/phantomjs ./node_modules/karma/bin/karma start karma.config.js
07 03 2018 04:50:38.115:ERROR [config]: File /app/karma.config.js does not exist!
npm ERR! Test failed. See above for more details.
-----> Node.js buildpack tests failed with exit status 1
What is this problem? Locally I don't have this config file but my project works fine, anybody have a clue on it? Thanks!
Here is the package.json file:
{
"name": "essential-react",
"version": "0.3.0",
"description": "A minimal skeleton for building testable React apps using ES6.",
"main": "src/main.jsx",
"scripts": {
"postinstall": "npm run build",
"server": "node server.js",
"build": "webpack -p --config webpack.production.config.js",
"test": "PHANTOMJS_BIN=./node_modules/.bin/phantomjs ./node_modules/karma/bin/karma start karma.conf.js",
"test-cross-browser": "./node_modules/karma/bin/karma start karma.cross-browser.config.js",
"coveralls": "cat coverage/lcov.info | coveralls",
"clean": "rm build/app.js"
},
"repository": {
"type": "git",
"url": "https://github.com/pheuter/essential-react.git"
},
"keywords": [
"skeleton",
"template",
"react",
"quickstart"
],
"author": "Mark Fayngersh",
"license": "MIT",
"bugs": {
"url": "https://github.com/pheuter/essential-react/issues"
},
"homepage": "https://github.com/pheuter/essential-react",
"devDependencies": {
"coveralls": "^2.11.2",
"istanbul": "^0.3.7",
"istanbul-instrumenter-loader": "^0.1.2",
"karma": "^0.13.22",
"karma-coverage": "^0.2.7",
"karma-mocha": "^0.1.10",
"karma-phantomjs-launcher": "^0.1.4",
"karma-sauce-launcher": "^0.2.10",
"karma-sinon-chai": "^0.3.0",
"karma-webpack": "^1.5.0",
"phantomjs": "^1.9.16",
"react-hot-loader": "^1.2.3",
"react-scripts": "0.2.1",
"webpack-dev-server": "^1.7.0"
},
"dependencies": {
"autoprefixer": "^6.0.2",
"babel-core": "^5.4.7",
"babel-loader": "^5.1.3",
"bootstrap": "^3.3.5",
"bootstrap-social": "^4.9.1",
"bundle-loader": "^0.5.4",
"classnames": "^2.2.0",
"css-loader": "^0.28.9",
"express": "^4.12.3",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"firebase": "^4.10.0",
"font-awesome": "^4.4.0",
"history": "^1.13.0",
"jquery": "^2.1.4",
"lazy": "^1.0.11",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"normalizr": "^1.1.0",
"nprogress": "^0.2.0",
"postcss-loader": "^0.6.0",
"postcss-nested": "^1.0.0",
"react": "^0.14.9",
"react-addons-css-transition-group": "^0.14.1",
"react-addons-transition-group": "^0.14.2",
"react-addons-update": "^15.3.0",
"react-bootstrap": "^0.27.0",
"react-dom": "^0.14.1",
"react-native-multiple-choice": "0.0.8",
"react-redux": "^5.0.7",
"react-router": "^1.0.0-rc2",
"react-router-redux": "^4.0.8",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"resource-api-utils": "^1.0.0",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.12.1"
}
}

Resources