Webpack Broken after installing vuex-persistedstate - node.js

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"
]

Related

running npm run build throws Error: Can't resolve 'Vue'

When running npm run build or nom run dev. the following error is produced.
ERROR in ./src/components/screens/login/login.js?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/eslint-loader??ref--0!./src/components/screens/login/login.js?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'Vue' in '/home/builder/build/release/projects/appschoolware/9.9.5/build/src/components/screens/login'
# ./src/components/screens/login/login.js?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/eslint-loader??ref--0!./src/components/screens/login/login.js?vue&type=script&lang=js&) 22:0-22 391:45-48
dont really understand, the reason for this..hope anyone can help.
My package.json is long so bear with me.
"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",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node --max_old_space_size=1024 build/build.js"
},
"dependencies": {
"rrule": "^2.6.8",
"#babel/polyfill": "^7.8.3",
"#riophae/vue-treeselect": "^0.4.0",
"axios": "^0.18.1",
"babel-polyfill": "^6.26.0",
"expr-eval": "^1.2.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"flat": "^5.0.2",
"gradle": "^1.2.3",
"jquery": "^3.5.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"qrcode.vue": "^1.7.0",
"save": "^2.4.0",
"v-tooltip": "^2.0.3",
"vue": "^2.6.11",
"vue-autosuggest": "^2.0.4",
"vue-axios": "^2.1.5",
"vue-ctk-date-time-picker": "^2.4.0",
"vue-infinite-loading": "^2.4.4",
"vue-print-nb": "^1.5.0",
"vue-qrcode-reader": "^2.1.1",
"vue-radial-menu": "^1.1.1",
"vue-router": "^3.1.5",
"vue-select": "^2.6.4",
"vue-swatches": "^1.0.4",
"vue-sweetalert2": "^1.2.4",
"vue-the-mask": "^0.11.1",
"vue-touch": "^2.0.0-beta.4",
"vue2-editor": "^2.10.2",
"vue2-filters": "^0.11.0",
"vue2-touch-events": "^2.1.0",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.2"
},
"devDependencies": {
"#babel/cli": "^7.8.3",
"#babel/core": "^7.8.3",
"#babel/plugin-transform-function-name": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#vue/babel-preset-app": "^4.1.2",
"autoprefixer": "^9.7.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.22.1",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.5",
"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.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^5.2.3",
"eventsource-polyfill": "^0.9.6",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"karma": "^4.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": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"mini-css-extract-plugin": "^0.5.0",
"mocha": "^5.2.0",
"node-notifier": "^5.4.3",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.25",
"postcss-loader": "^3.0.0",
"rimraf": "^2.7.1",
"semver": "^5.7.1",
"shelljs": "^0.8.3",
"sinon": "^7.5.0",
"sinon-chai": "^3.4.0",
"transfer-webpack-plugin": "^0.1.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^1.1.2",
"vue-hot-reload-api": "^2.3.4",
"vue-loader": "^15.8.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-emit-all-plugin": "^2.0.1",
"webpack-merge": "^4.2.2"
},
"engines": {
"node": ">=12.13.0 <13.0.0",
"npm": ">= 6.12.0"
As you see in the file login.js there is a single line "import Vue from 'Vue' " and thats i think throwing the error..but in my localhost i dont see any issues.
import Vue from 'vue' was the solution...Capital letters matter!!! careful!

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

Metronic | KeenThemes Charts not working Laravel

I followed to the following tutorial :
https://keenthemes.com/metronic/?page=docs&section=laravel-integration
Theme installation is successful.
Except for one thing. The charts are not showing up.
Here a screenshot of my page
The assets were successfully downloaded and compiled. Here is the package.js content.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"#ckeditor/ckeditor5-alignment": "^11.2.0",
"#ckeditor/ckeditor5-build-balloon": "^12.4.0",
"#ckeditor/ckeditor5-build-balloon-block": "^12.4.0",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^12.4.0",
"#ckeditor/ckeditor5-build-inline": "^12.4.0",
"#fortawesome/fontawesome-free": "^5.8.1",
"#fullcalendar/core": "^4.2.0",
"#fullcalendar/daygrid": "^4.2.0",
"#fullcalendar/google-calendar": "^4.2.0",
"#fullcalendar/interaction": "^4.2.0",
"#fullcalendar/list": "^4.2.0",
"#fullcalendar/timegrid": "^4.2.0",
"#uppy/core": "^1.1.0",
"#uppy/progress-bar": "^1.1.0",
"#uppy/tus": "^1.2.0",
"#yaireo/tagify": "^2.23.1",
"animate.css": "^3.5.2",
"autosize": "^4.0.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "1.13.10",
"bootstrap-switch": "3.3.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chart.js": "^2.7.3",
"clipboard": "^2.0.4",
"corejs-typeahead": "^1.3.0",
"counterup": "^1.0.2",
"cropperjs": "^1.5.6",
"datatables.net-autofill-bs4": "^2.3.4",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons-bs4": "^1.6.0",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.0",
"datatables.net-fixedheader-bs4": "^3.1.6",
"datatables.net-keytable-bs4": "^2.5.1",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
"datatables.net-rowreorder-bs4": "^1.2.6",
"datatables.net-scroller-bs4": "^2.0.1",
"datatables.net-select-bs4": "^1.3.1",
"dompurify": "^1.0.9",
"dropzone": "^5.5.1",
"dual-listbox": "1.1.0",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"flot": "^3.2.2",
"gmaps": "^0.4.24",
"handlebars": "4.1.0",
"inputmask": "^4.0.6",
"ion-rangeslider": "^2.2.0",
"jkanban": "^1.0.1",
"jquery": "^3.3.1",
"jquery-form": "^4.2.2",
"jquery-ui": "^1.12.1",
"jquery-validation": "1.19.0",
"jquery.repeater": "^1.2.1",
"jqvmap": "^1.5.1",
"js-cookie": "^2.2.0",
"jstree": "^3.3.8",
"jszip": "^3.2.2",
"markdown": "^0.5.0",
"moment": "^2.24.0",
"morris.js": "^0.5.0",
"nouislider": "^13.1.0",
"owl.carousel": "^2.3.4",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pdfmake": "^0.1.60",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.7",
"prismjs": "^1.8.4",
"quill": "^1.3.6",
"raphael": "^2.2.7",
"select2": "^4.0.8",
"socicon": "^3.0.5",
"sticky-js": "^1.2.0",
"stream-exhaust": "^1.0.2",
"summernote": "0.8.12",
"sweetalert2": "^8.0.6",
"tagify": "^0.1.1",
"tether": "^1.4.3",
"tinymce": "^5.0.16",
"toastr": "^2.1.4",
"tooltip.js": "^1.2.0",
"underscore": "^1.8.3",
"uppy": "^1.3.0",
"waypoints": "^4.0.1",
"whatwg-fetch": "^3.0.0",
"wnumb": "^1.1.0"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
Thank you for your help in advance

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"
}

Error while deploying a node app on Heroku

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"
]
}

Resources