vue.js - I'm getting an error when running my project - vue.js

sudo npm run serve
> frontend#1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve
INFO Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
throw new Error(
^
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at Array.fs.readdir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:67:5)
at Storage.finished (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/enhanced-
resolve/lib/CachedInputFileSystem.js:55:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#1.0.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 serve 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! /home/shinier01/.npm/_logs/2020-11-10T18_21_27_165Z-debug.log
I tried to uninstall npm, vue and node, I deleted the .json files, but somehow nothing solves, and I always have this error when executing my command.
but this project is already running normally before, and now I gave an npm install and it updated the packages, but even if I give a roolbakc, or delete and install it again, nothing resolves.
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": ".....",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/cli": "^4.5.8",
"#vue/cli-service": "^4.5.8",
"axios": "^0.20.0",
"buefy": "^0.9.3",
"firebase": "^7.22.0",
"vue": "^2.6.12",
"vue-router": "^3.0.1"
},
"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",
"copy-webpack-plugin": "^6.3.0",
"css-loader": "^5.0.1",
"extract-text-webpack-plugin": "^2.1.2",
"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": "^4.1.1",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^5.4.0",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"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"
]
}
can someone help me solve this error, please?

I faced the same problem and found a solution.
In my case application started using V5 of webpack and it was built on V4. You can run: npm i -D webpack#^4.0.0 to reverse it to V4 and it should fix it.
Special thanks to Mark:
https://forum.layer0.co/t/error-module-property-was-removed-from-dependency/208

Related

npm ERR! npm install failed

I'm trying to install package.json file using the command npm install, but I'm getting the following error. (node-gyp version: 9.2.0, node version: 16.17.1)
npm ERR! gyp ERR! cwd C:\Users\work\project\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.17.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
there's my package.json:
{
"name": "PROJECT",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"start": "node server.js",
"build": "vue-cli-service build"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/vue-fontawesome": "^0.1.9",
"axios": "^0.21.1",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"browserslist": "^4.14.3",
"core-js": "^3.6.4",
"jquery": "^3.5.1",
"moment": "^2.24.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-router": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.13.1",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"optionalDependencies": {}
}
I've been researching for hours trying to figure out this issue, but i have no clue at all.
Thanks in advance!

Cannot run npm run serve and I already run npm update But still keeping up my error

When i run npm run serve , this error is keep coming up.
Error: Cannot find module './editor-info/linux'
Require stack:
- C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\launch-editor\guess.js
- C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\launch-editor\index.js
- C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\#vue\cli-shared-utils\lib\launch.js
- C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\#vue\cli-shared-utils\index.js
- C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\#vue\cli-service\bin\vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\LENOVO\Desktop\covidcare-ytu-clinic\node_modules\launch-editor\guess.js:9:30)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\LENOVO\\Desktop\\covidcare-ytu-clinic\\node_modules\\launch-editor\\guess.js',
'C:\\Users\\LENOVO\\Desktop\\covidcare-ytu-clinic\\node_modules\\launch-editor\\index.js',
'C:\\Users\\LENOVO\\Desktop\\covidcare-ytu-clinic\\node_modules\\#vue\\cli-shared-utils\\lib\\launch.js',
'C:\\Users\\LENOVO\\Desktop\\covidcare-ytu-clinic\\node_modules\\#vue\\cli-shared-utils\\index.js',
'C:\\Users\\LENOVO\\Desktop\\covidcare-ytu-clinic\\node_modules\\#vue\\cli-service\\bin\\vue-cli-service.js'
]
}
I already run npm update but this error keep coming up .I am new to vue project and this bugs is breaking my patient....Please someone save me.
here is my package.json
{ "name": "covidcare-ytu", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "#vuelidate/core": "^2.0.0-alpha.26", "#vuelidate/validators": "^2.0.0-alpha.22", "axios": "^0.21.4", "chart.js": "^3.5.1", "core-js": "^3.6.5", "es-abstract": "^1.18.6", "firebase": "^9.0.0", "nprogress": "^0.2.0", "primeflex": "^2.0.0", "primeicons": "^4.1.0", "primevue": "^3.7.0", "prismjs": "^1.24.1", "uuid": "^8.3.2", "vue": "^3.2.6", "vue-axios": "^3.3.7", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "#vue/cli-plugin-babel": "~4.5.0", "#vue/cli-plugin-eslint": "^3.1.1", "#vue/cli-plugin-router": "~4.5.0", "#vue/cli-plugin-unit-jest": "^4.5.13", "#vue/cli-plugin-vuex": "~4.5.0", "#vue/cli-service": "^4.5.13", "#vue/compiler-sfc": "^3.0.0", "#vue/eslint-config-prettier": "^6.0.0", "#vue/test-utils": "^2.0.0-0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.0.0", "prettier": "^2.2.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "typescript": "~3.9.3", "vue-jest": "^5.0.0-0" } }
Here is babel.config.js
module.exports = { presets: ['#vue/cli-plugin-babel/preset'], }
Then is because somewhere you have libraries that require or have Linux dependencies, I recommend to you create a backup of your package.json and remove "#vue-cli" with this:
npm uninstall #vue/cli
And then install it again:
npm install -g #vue/cli
Other solution can try is to update your npm with the following:
npm install npm#latest -g
Then delete the folder "node-modules" to clean all libraries that you have installed on your project and then install with the following:
npm install

How to update all npm packages in a medium/advanced project?

I'm trying to update Angular from version 11 to 12 and I'm following this tutorial: https://update.angular.io/?l=3&v=11.0-12.0
When I launch this command ng update #angular/core#12 #angular/cli#12 on the terminal I have this message:
✔ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 0 dependencies.
Package '#angular/core' is not a dependency.
I can't resolve in noway, nothing change in my package.json. I'm tryng to update with npm i #angular/core#12 npi i #angular/cli#12, it works but when I'm going to install all packages in my package.json I have a lot of problem with dependency like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: poc-architecture-angular#0.0.0
npm ERR! Found: #angular/common#12.1.5
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"~12.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#">=11.0.0 <12.0.0" from #ng-select/ng-select#6.1.0
npm ERR! node_modules/#ng-select/ng-select
npm ERR! #ng-select/ng-select#"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/andrea/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrea/.npm/_logs/2021-09-06T13_14_09_645Z-debug.log
I would to update Angular and after that all the outdated packages but I can't. Is something wrong? I tried also with npx npm-check-updates -u but with same dependencies issues.
This is my package.json:
{
"name": "poc-architecture-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:dev": "NODE_ENV=production ng build --source-map=true --prod",
"build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
"test": "ng test",
"test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
"lint": "ng lint",
"e2e": "ng e2e",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"compodoc": "./node_modules/.bin/compodoc -p ./tsconfig.base.json -w -s --language=it-IT -r 8081",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "npm run docs:json && start-storybook -p 9001 --quiet -c .storybook",
"build-storybook": "npm run docs:json && build-storybook",
"cypress:open-local": "cypress open --config baseUrl=http://localhost:4200",
"cypress:run-local": "cypress run --config baseUrl=http://localhost:4200",
"sonar": "sonar-scanner"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
]
},
"exports": {
"./": "./*"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.1.4",
"#angular/cdk": "^11.2.12",
"#angular/common": "~12.1.4",
"#angular/compiler": "^12.1.4",
"#angular/core": "^12.1.5",
"#angular/forms": "~12.1.4",
"#angular/material": "^11.2.12",
"#angular/platform-browser": "~12.1.4",
"#angular/platform-browser-dynamic": "~12.1.4",
"#angular/router": "~12.1.4",
"#fullcalendar/angular": "^5.5.0",
"#fullcalendar/core": "^5.5.1",
"#fullcalendar/daygrid": "^5.5.0",
"#fullcalendar/interaction": "^5.5.0",
"#ng-select/ng-select": "^6.1.0",
"#ngrx/effects": "^11.1.1",
"#ngrx/router-store": "^11.1.1",
"#ngrx/store": "^11.1.1",
"#ngrx/store-devtools": "^11.1.1",
"#storybook/preset-scss": "^1.0.3",
"chart.js": "^2.9.3",
"filesize": "^6.1.0",
"hammerjs": "^2.0.8",
"i": "^0.3.6",
"lodash-es": "^4.17.20",
"luxon": "^1.26.0",
"moment": "^2.29.1",
"ng2-date-picker": "^11.0.0",
"ng2-pdf-viewer": "^6.4.1",
"ngrx-store-localstorage": "^11.0.0",
"ngx-cookie-service": "^11.0.2",
"ngx-infinite-scroll": "^10.0.1",
"ngx-webstorage": "^7.0.1",
"npm": "^7.22.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^12.2.2",
"#angular/cli": "^12.2.4",
"#angular/compiler-cli": "^12.1.4",
"#babel/core": "^7.13.10",
"#compodoc/compodoc": "^1.1.11",
"#ngrx/schematics": "^11.1.1",
"#storybook/addon-actions": "^6.1.21",
"#storybook/addon-backgrounds": "^6.1.21",
"#storybook/addon-docs": "^6.1.21",
"#storybook/addon-knobs": "^6.1.21",
"#storybook/addon-links": "^6.1.21",
"#storybook/addon-storysource": "^6.1.21",
"#storybook/addon-viewport": "^6.1.21",
"#storybook/angular": "^6.1.21",
"#types/faker": "^5.1.7",
"#types/fs-extra": "^5.0.2",
"#types/jasmine": "^3.5.14",
"#types/jasminewd2": "~2.0.3",
"#types/lodash": "^4.14.168",
"#types/luxon": "^1.26.3",
"#types/node": "^12.12.54",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^4.3.0",
"cypress": "^7.6.0",
"faker": "^5.1.0",
"husky": "^4.3.8",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.5.4",
"ng-packagr": "^12.2.1",
"postcss": "^8.1.0",
"postcss-loader": "^4.0.2",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"puppeteer": "~8.0.0",
"sass-loader": "^10.0.2",
"sonarqube-scanner": "2.8.0",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.2.6",
"tailwindcss-multi-column": "^1.0.2",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.3.5",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.5.0"
}
}
Navigate to the root directory of your project and ensure it contains a package.json file:
cd /path/to/project
In your project root directory, run the update command:
npm update
To test the update, run the outdated command. There should not be any output.
npm outdated
Update globally-installed packages. If you are using npm version 2.6.0 or earlier, run this command to update all outdated global packages:
npm install npm#latest -g
However, please consider upgrading to the latest version of npm.

How to configure Vue with SCSS

The second I change
<style>
to
<style lang="scss">
I start getting errors in the terminal:
18% building modules 74/80 modules 6 active
...vue-router/src/components/Landing.vue(node:30664)
UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]:
The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.join (path.js:1039:7)
at getSassOptions (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/utils.js:166:37)
at Object.loader (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/index.js:43:55)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at Object.context.callback (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/vue-loader/lib/selector.js:21:8)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
(Use `node --trace-warnings ...` to show where the warning was
created) (node:30664) UnhandledPromiseRejectionWarning: Unhandled
promise rejection. This error originated either by throwing inside of
an async function without a catch block, or by rejecting a promise
which was not handled with .catch(). To terminate the node process on
unhandled promise rejection, use the CLI flag
`--unhandled-rejections=strict` (see
https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 2) (node:30664) [DEP0018] DeprecationWarning: Unhandled
promise rejections are deprecated. In the future, promise rejections
that are not handled will terminate the Node.js process with a
non-zero exit code.
I believe I have installed the dependencies needed, it appear from the trace that sass-loader may be an issue here.
I installed sass using the command
npm install -D sass-loader#^10.1.1 node-sass
Any tips would be much appreciated, as really not sure what the issue could be at this point.
Landing.vue
<template>
<div>
<h1>Agile Admin App</h1>
</div>
</template>
<style lang="scss">
h1 {
border: 1px solid black;
}
</style>
I also figured my package.json file would be of use, as it may be a version issue for something like webpack or sass-loader
{
"name": "myapp",
"version": "1.0.0",
"description": "My App",
"author": "email#email.email",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"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": {
"axios": "^0.21.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.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",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.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",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^5.0.0",
"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",
"sass-loader": "^10.1.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"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"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Did you followed this tutorial? https://vue-loader.vuejs.org/guide/pre-processors.html#sass
You may try
npm install -D sass-loader node-sass
Then, in your webpack config
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
This should do the trick.
Never got to the bottom of this sadly, even with the suggestions above. Ultimately someone at work suggested copying my custom code out, rebuilding the setup in the cli using vite, then reapplying my work. This appeared to fix the issue.
Doesn't really explain why it broke, but this was the fix in my case.

NET::ERR_CERT_INVALID error when running VueJS project

I have an year old VueJS project that runs on v3.9.2 of #vue/cli-service. I have been running it on https://localhost:8000 using the --https flag of vue-cli-service command.
Now, I updated my #vue/cli-service package to v3.12.1. When I run npm run serve, I get the following error in Chrome. There is no button to proceed to localhost.
Can anyone tell me what has changed in Vue cli service that this error is showing up and how can I fix this error?
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
"prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
"build": "npm run generate && vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-check": "vue-cli-service lint --no-fix",
"serve": "vue-cli-service --https --port 8000 serve --host localhost",
"postinstall": "postinstall",
"test": "jest --changedSince=master --coverage",
"test-ci": "jest --ci",
"test-watch": "npm run generate && jest --watch --no-coverage",
"test-e2e": "cypress run --browser chrome",
"test-e2e-headless": "cypress run",
"test-e2e-dev": "cypress open"
},
"dependencies": {
"#babel/polyfill": "^7.0.0-rc.1",
"can-ndjson-stream": "^1.0.0",
"color-convert": "^2.0.0",
"filesize": "^4.1.2",
"intro.js": "^2.9.3",
"jsonpath": "^1.0.1",
"lodash": "^4.17.11",
"luxon": "^1.11.4",
"papaparse": "^4.6.3",
"sass-loader": "^8.0.0",
"search-query-parser": "^1.5.2",
"vue": "^2.5.21",
"vue-i18n": "^8.8.1",
"vue-introjs": "^1.3.2",
"vue-router": "^3.0.1",
"vue2-dropzone": "^3.5.2",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.12",
"vuex": "^3.0.1",
"vuex-i18n": "^1.11.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-babel": "3.12.1",
"#vue/cli-plugin-eslint": "3.12.1",
"#vue/cli-service": "3.12.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"cypress": "^3.4.1",
"eslint": "^5.8.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"fs-extra": "^8.0.1",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"postinstall": "^0.4.2",
"regenerator-runtime": "^0.13.1",
"sass": "^1.23.7",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-analyzer": "^3.3.2",
"worker-loader": "^2.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"postinstall": {
"generator/acl_actions.csv": "link public/acl_actions.csv",
"generator/acl_fields.csv": "link public/acl_fields.csv"
}
}
OS: Ubuntu 18.04
Same thing happens if I create a fresh project as well. Both new and old projects work in Firefox.
The bug was introduced in webpack-dev-server version 3.9: https://github.com/webpack/webpack-dev-server/issues/2313
I managed to use the older version without the bug by adding to dependencies:
"webpack-dev-server": "3.8.2"
And changing the version of #vue/cli-service in devDependencies (note the tilde)
"#vue/cli-service": "~4.0.0",
Then removed node_modules, package-lock before doing npm install and npm run serve
Hope this helps you
IF certification error is triggered from browser not reaching a valid signature in that machine, try generate a new one:
How to create a self-signed certificate with OpenSSL
other possibility is to make Chrome ignore absence of certifications:
in Chrome address bar :
chrome://flags/#allow-insecure-localhost
(answer from: technipages )