While running ng serve command i'm getting this error - angular8

Package.jon file
{
"name": "architectui-angular-free",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-redux/store": "^9.0.0",
"#angular/animations": "^7.2.11",
"#angular/cdk": "^7.3.6",
"#angular/common": "^7.2.11",
"#angular/compiler": "^7.2.11",
"#angular/core": "^7.2.11",
"#angular/forms": "^7.2.11",
"#angular/platform-browser": "^7.2.11",
"#angular/platform-browser-dynamic": "^7.2.11",
"#angular/router": "^7.2.11",
"#ng-bootstrap/ng-bootstrap": "^4.1.1",
"#ngx-loading-bar/core": "^4.2.0",
"#ngx-loading-bar/router": "^4.2.0",
"angular-font-awesome": "^3.1.2",
"animate-sass": "^0.8.2",
"bootstrap": "4.3.1",
"chart.js": "^2.8.0",
"chartjs-adapter-luxon": "^0.1.1",
"chartjs-plugin-annotation": "^0.5.7",
"chartjs-plugin-datalabels": "^0.6.0",
"font-awesome": "^4.7.0",
"lodash-es": "^4.17.11",
"ng-bootstrap": "^1.6.3",
"ng2-charts": "^2.2.2",
"ngx-perfect-scrollbar": "^7.2.1",
"pe7-icon": "^1.0.4",
"redux": "4.0.0",
"sass-loader": "^7.0.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular/cli": "^9.0.2",
"#angular/compiler-cli": "^7.2.11",
"#angular/language-service": "^7.2.11",
"#fortawesome/fontawesome-free": "^5.8.1",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"cross-env": "^5.0.5",
"increase-memory-limit": "^1.0.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
ERROR
ERROR in ./src/styles.scss (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./node_modules/font-awesome/scss/font-awesome.scss (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./node_modules/font-awesome/scss/font-awesome.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/DemoPages/Charts/chartjs/examples/pie-chart/pie-chart.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/DemoPages/Charts/chartjs/examples/polar-area-chart/polar-area-chart.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/DemoPages/Charts/chartjs/examples/radar-chart/radar-chart.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/DemoPages/Charts/chartjs/examples/scatter-chart/scatter-chart.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
at Object.loader (C:\Users\YASH\AppData\Roaming\npm\architectui-angular-free-theme\architectui-angular-free-theme\node_modules\sass-loader\dist\index.js:36:28)

May be something wrong in your packages.
Option1: Update all packages.
Option2: Re install all packages. Delete your node_modules folder and run npm-i from command-line.

Related

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.

Angular 11 firebase site not launching

I've been working on an Angular11 firebase website, and I have managed to break something that has completely lost me. I did an npm audit that managed to break everything
I've tried removing and reinstalling everything I can, as well as starting a new project and readding
The Error:
TypeError: Cannot read property 'toString' of undefined
at new AngularFireModule (c:\nodejs\pt-web\node_modules\#angular\fire\__ivy_ngcc__\fesm2015\angular-fire.js:481:17)
at Object.factory (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11332:1)
at R3Injector.hydrate (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11385:1)
at R3Injector.get (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11205:1)
at c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11242:1
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11242:1)
at new NgModuleRef$1 (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:25228:1)
at NgModuleFactory$1.create (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:25282:1)
at http://localhost:4200/vendor.js:114008:45 {stack: 'TypeError: Cannot read property 'toString' of… at http://localhost:4200/vendor.js:114008:45', message: 'Cannot read property 'toString' of undefined'}
arg0: TypeError: Cannot read property 'toString' of undefined
at new AngularFireModule (http://localhost:4200/vendor.js:138898:118)
at Object.factory (http://localhost:4200/vendor.js:96231:58)
at R3Injector.hydrate (http://localhost:4200/vendor.js:96284:35)
at R3Injector.get (http://localhost:4200/vendor.js:96104:33)
at http://localhost:4200/vendor.js:96141:55
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (http://localhost:4200/vendor.js:96141:31)
at new NgModuleRef$1 (http://localhost:4200/vendor.js:110127:26)
at NgModuleFactory$1.create (http://localhost:4200/vendor.js:110181:16)
at http://localhost:4200/vendor.js:114008:45 {stack: 'TypeError: Cannot read property 'toString' of… at http://localhost:4200/vendor.js:114008:45', message: 'Cannot read property 'toString' of undefined'}
message: 'Cannot read property 'toString' of undefined'
stack: 'TypeError: Cannot read property 'toString' of undefined\n at new AngularFireModule (http://localhost:4200/vendor.js:138898:118)\n at Object.factory (http://localhost:4200/vendor.js:96231:58)\n at R3Injector.hydrate (http://localhost:4200/vendor.js:96284:35)\n at R3Injector.get (http://localhost:4200/vendor.js:96104:33)\n at http://localhost:4200/vendor.js:96141:55\n at Set.forEach (<anonymous>)\n at R3Injector._resolveInjectorDefTypes (http://localhost:4200/vendor.js:96141:31)\n at new NgModuleRef$1 (http://localhost:4200/vendor.js:110127:26)\n at NgModuleFactory$1.create (http://localhost:4200/vendor.js:110181:16)\n at http://localhost:4200/vendor.js:114008:45'
__proto__: Error
<anonymous> # c:\nodejs\pt-web\src\main.ts:12:25
invoke # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:364
run # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:123
<anonymous> # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:857
invokeTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:399
runTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:167
drainMicroTaskQueue # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:569
◀ Promise.then ▶
scheduleMicroTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:552
scheduleTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:388
scheduleTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:210
scheduleMicroTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:230
scheduleResolveOrReject # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:847
then # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:979
bootstrapModule # c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:29159
zUnb # c:\nodejs\pt-web\src\main.ts:11:26
__webpack_require__ # c:\nodejs\pt-web\webpack\bootstrap:84
0 # localhost꞉4200/main.js:11:18
__webpack_require__ # c:\nodejs\pt-web\webpack\bootstrap:84
checkDeferredModules # c:\nodejs\pt-web\webpack\bootstrap:45
webpackJsonpCallback # c:\nodejs\pt-web\webpack\bootstrap:32
<anonymous> # localhost꞉4200/main.js:1:57
[WDS] Live Reloading enabled.
package.json
{
"name": "mega-able",
"version": "1.3.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular/animations": "^11.1.2",
"#angular/common": "^11.1.2",
"#angular/compiler": "^11.1.2",
"#angular/core": "^11.2.7",
"#angular/fire": "^6.1.4",
"#angular/forms": "^11.1.2",
"#angular/localize": "^11.2.7",
"#angular/platform-browser": "^11.1.2",
"#angular/platform-browser-dynamic": "^11.1.2",
"#angular/router": "^11.1.2",
"#fullcalendar/angular": "^5.6.0",
"#fullcalendar/core": "^5.6.0",
"#fullcalendar/daygrid": "^5.6.0",
"#fullcalendar/interaction": "^5.6.0",
"#fullcalendar/timegrid": "^5.6.0",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"#swimlane/ngx-datatable": "^17.1.0",
"angular": "^1.8.2",
"angular-archwizard": "^6.1.0",
"angular-datatables": "^9.1.1",
"angular-pell": "^0.1.0",
"angular-tree-component": "^8.5.6",
"angular2-chartjs": "^0.5.1",
"angular2-text-mask": "^9.0.0",
"bootstrap": "^4.6.0",
"c3": "^0.7.20",
"d3": "^5.16.0",
"datatables.net": "^1.10.24",
"datatables.net-buttons": "^1.7.0",
"datatables.net-buttons-dt": "^1.7.0",
"datatables.net-colreorder": "^1.5.3",
"datatables.net-dt": "^1.10.24",
"datatables.net-responsive": "^2.2.7",
"datatables.net-select": "^1.3.3",
"famfamfam-flags": "^1.0.0",
"firebase": "^8.3.1",
"firebaseui": "^4.8.0",
"font-awesome-scss": "^1.0.0",
"fullcalendar": "^5.6.0",
"hammerjs": "^2.0.8",
"jquery": "^3.6.0",
"jszip": "^3.6.0",
"netmask": "^2.0.1",
"ng-click-outside": "^6.0.0",
"ng-select": "^1.0.2",
"ng2-currency-mask": "^9.0.2",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.4.0",
"ng2-google-charts": "^6.1.0",
"ng2-nouislider": "^1.8.3",
"ng2-toasty": "^4.0.3",
"ngx-bar-rating": "^1.1.0",
"ngx-chips": "^2.2.2",
"ngx-color-picker": "^9.1.0",
"ngx-custom-validators": "^9.1.0",
"ngx-lightbox": "^2.2.2",
"ngx-perfect-scrollbar": "^8.0.0",
"node-sass": "^4.14.1",
"nouislider": "^14.6.4",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"screenfull": "^5.1.0",
"sweetalert2": "^9.17.2",
"text-mask-addons": "^3.8.0",
"tslib": "^2.1.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/architect": "^0.1102.6",
"#angular-devkit/build-angular": "^0.1101.4",
"#angular/cli": "^11.2.6",
"#angular/compiler-cli": "^11.1.2",
"#types/datatables.net": "^1.10.19",
"#types/datatables.net-buttons": "^1.4.5",
"#types/jasmine": "^3.6.9",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.5.5",
"#types/node": "^12.20.7",
"codelyzer": "^6.0.1",
"firebase-tools": "^9.8.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"open": "^7.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"typescript": "4.1.2"
}
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
I'm completely lost now, hoping someone here can see the obvious thing I'm sure I am missing
Check angular and firebase #angular/fire compatibility issues
AngularFire doesn't follow Angular's versioning as Firebase also has breaking changes throughout the year. Instead we try to maintain compatibility with both Firebase and Angular majors for as long as possible, only breaking when we need to support a new major of one or the other.
See here:
https://github.com/angular/angularfire#compatibility

Issue setting up Nightwatch

I have a Django project I am attempting to get nightwatch JS setup on, but I can't seem to get around issues with selinum drivers.
I have a node_modules directory like this (showing important areas)
node_modules
.bin
chromedriver
geckodriver
In my root folder I have a test written like so, named custom_test.js:
module.exports = {
'NW test on Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'Nightwatch JS')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('ol#rso li:first-child',
'Nightwatch.js | Node.js powered End-to-End testing framework')
.end()
}
}
Scripts in package.json:
"nightwatch": "./node_modules/.bin/nightwatch"
And just in case this is needed, here shows the devDependenices from chromedriver and geckdriver
"chromedriver": "^88.0.0",
"geckodriver": "^1.22.1",
And now nightwatch.json
{
"src_folders" : [""],
"webdriver" : {
"start_process": true,
"server_path": "node_modules/.bin/geckodriver",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "firefox"
}
}
}
}
When I run: npm run nightwatch custom_test.js I simplt get:
An error occurred while retrieving a new session: "Expected browser binary location, but unable to find binary in default location, no 'moz:firefoxOptions.binary' capability provided, and no binary flag set on the command line"
If I change the nightwatch.json file to point to the chromedriver I get this error:
{
"src_folders" : [""],
"webdriver" : {
"start_process": true,
"server_path": "node_modules/.bin/chromedriver",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
An error occurred while retrieving a new session: "unknown error: cannot find Chrome binary"
This is not making sense to me as the configuration is only telling me to run the installations of the drivers through npm install:
https://nightwatchjs.org/gettingstarted/configuration/
What am I doing wrong?
UPDATE
Changin the config to nightwatch.conf.js:
module.exports = {
// An array of folders (excluding subfolders) where your tests are located;
// if this is not specified, the test source must be passed as the second argument to the test runner.
src_folders: ["tests"],
webdriver: {
start_process: true,
port: 4444,
server_path: require('chromedriver').path,
cli_args: [
]
},
test_settings: {
default: {
desiredCapabilities: {
browserName: 'chrome',
}
}
}
}
Provides this error:
An error occurred while retrieving a new session: "unknown error: cannot find Chrome binary"
Here is the whole output:
npm run nightwatch custom_test.js
> exactestate#1.0.0 nightwatch /opt/project
> nightwatch "custom_test.js"
[Custom Test] Test Suite
========================
⚠ Error connecting to localhost on port 4444.
_________________________________________________
TEST FAILURE: 1 error during execution; 0 tests failed, 0 passed (221ms)
✖ custom_test
An error occurred while retrieving a new session: "unknown error: cannot find Chrome binary"
Error: An error occurred while retrieving a new session: "unknown error: cannot find Chrome binary"
at endReadableNT (_stream_readable.js:1187:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Error: An error occurred while retrieving a new session: "unknown error: cannot find Chrome binary"
at endReadableNT (_stream_readable.js:1187:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
SKIPPED:
- NW test on Google
npm ERR! code ELIFECYCLE
npm ERR! errno 5
npm ERR! exactestate#1.0.0 nightwatch: `nightwatch "custom_test.js"`
npm ERR! Exit status 5
npm ERR!
npm ERR! Failed at the exactestate#1.0.0 nightwatch 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! /root/.npm/_logs/2021-02-09T17_02_25_145Z-debug.log
UPDATE WITH NPX
Starting: nightwatch custom_test.js
internal/modules/cjs/loader.js:983
throw err;
^
Error: Cannot find module '/opt/project/nightwatch'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
at Function.Module._load (internal/modules/cjs/loader.js:862:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
UPDATE 3: WHOLE PACKAGE.JSON
{
"name": "exactestate",
"version": "1.0.0",
"description": "Modern, Secure, and Customizable Real Estate Management Software in the Cloud.",
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"serve": "webpack-dev-server",
"test": "jest --colors --coverage --verbose ",
"nightwatch": "./node_modules/.bin/nightwatch"
},
"browserslist": [
"last 2 version",
"> 1%"
],
"dependencies": {
"#fortawesome/fontawesome-pro": "^5.13.0",
"axios": "^0.21.1",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"cleave": "^1.0.0-alpha.10",
"crypto-js": "^4.0.0",
"datatables.net": "^1.10.20",
"gsap": "^3.2.6",
"intro.js": "^2.9.3",
"jquery": "^3.5.0",
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.4.3",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.6",
"mobile-device-detect": "^0.3.3",
"moment": "^2.24.0",
"mousetrap": "^1.6.5",
"node": "^12.16.2",
"popper.js": "^1.16.1",
"qs": "^6.9.3",
"secure-web-storage": "^1.0.2",
"tiptap": "^1.27.0",
"tiptap-extensions": "^1.29.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"v-mask": "^2.1.0",
"validator": "^12.2.0",
"vue": "^2.6.11",
"vue-async-computed": "^3.8.2",
"vue-chartjs": "^3.5.1",
"vue-inputmask": "^0.2.1",
"vue2-perfect-scrollbar": "^1.5.0",
"vuedraggable": "^2.23.2",
"ws": "^7.3.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.11.6",
"#babel/plugin-transform-runtime": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#tweenjs/tween.js": "^18.5.0",
"#vue/test-utils": "^1.1.0",
"autoprefixer": "^9.7.6",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.5.2",
"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.3.0",
"chromedriver": "^88.0.0",
"clean-webpack-plugin": "^3.0.0",
"co": "^4.6.0",
"co-mocha": "^1.2.2",
"compression-webpack-plugin": "^3.1.0",
"copy-webpack-plugin": "^5.1.1",
"core-js": "^3.6.5",
"css-loader": "^3.5.2",
"electron": "^11.2.3",
"fibers": "^4.0.2",
"file-loader": "^4.3.0",
"geckodriver": "^1.22.1",
"glob": "^7.1.6",
"gzip-loader": "0.0.1",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^26.5.3",
"jspdf": "^1.5.3",
"mini-css-extract-plugin": "^0.8.2",
"mocha": "^8.2.1",
"mocha-generators": "^2.0.0",
"nightmare": "^3.0.2",
"nightwatch": "^1.5.1",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"regenerator-runtime": "^0.13.5",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"speed-measure-webpack-plugin": "^1.3.3",
"style-loader": "^1.1.4",
"url-loader": "^2.2.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-bundle-tracker": "^0.4.3",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ViaTechSystems/ExactEstate.git"
},
"bugs": {
"url": "https://github.com/ViaTechSystems/ExactEstate/issues"
},
"homepage": "https://github.com/ViaTechSystems/ExactEstate#readme"
}
Create a file in your root directory as nightwatch.conf.js and copy the below -
module.exports = {
// An array of folders (excluding subfolders) where your tests are located;
// if this is not specified, the test source must be passed as the second argument to the test runner.
src_folders: [],
webdriver: {
start_process: true,
port: 4444,
server_path: require('chromedriver').path,
cli_args: []
},
test_settings: {
default: {
desiredCapabilities: {
browserName: "chrome",
chromeOptions: {
args: ['disable-gpu', 'no-sandbox', 'headless']
}
}
}
}
}

How to use mixing in cypress of vue/cli 4 app?

In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js  file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source

Webpack Babel - Module build failed: TypeError: Cannot read property 'bindings' of nul

I'm building a new project in VUEJS 2 and am having a issue. I'm fairly new to webpack so I'm learning it as I go. Can you tell me why this section of code throws an error?
./store/modules/user/store.js
const state = {
user: {}
};
Then when it gets compiled, webpack throws these errors:
ERROR Failed to compile with 1 errors 14:21:50
error in ./assets/js/store/modules/user/store.js
Module build failed: TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (c:\myProject\node_modules\#babel\traverse\lib\scope\index.js:978:13)
at BlockScoping.updateScopeInfo (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
at BlockScoping.run (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
at newFn (c:\myProject\node_modules\#babel\traverse\lib\visitors.js:237:21)
at NodePath._call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:65:20)
at NodePath.call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:100:12)
at TraversalContext.visitQueue (c:\myProject\node_modules\#babel\traverse\lib\context.js:142:16)
at TraversalContext.visitSingle (c:\myProject\node_modules\#babel\traverse\lib\context.js:102:19)
at TraversalContext.visit (c:\myProject\node_modules\#babel\traverse\lib\context.js:182:19)
at Function.traverse.node (c:\myProject\node_modules\#babel\traverse\lib\index.js:106:17)
at traverse (c:\myProject\node_modules\#babel\traverse\lib\index.js:76:12)
at transformFile (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:116:29)
at runSync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:45:3)
at runAsync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:35:14)
at process.nextTick (c:\myProject\node_modules\#babel\core\lib\transform.js:34:34)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
# ./assets/js/store/store.js 3:0-40
# ./assets/js/main.js
Here is my package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.17.0",
"#vue/cli-plugin-babel": "^3.0.0-rc.3",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"vue-loader": "^14.1.1",
"vue-template-compiler": "^2.5.16"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.0.0-beta.51",
"#coreui/coreui": "^2.0.3",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"#coreui/icons": "0.2.0",
"#coreui/vue": "^2.0.0-rc.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"css-vars-ponyfill": "^1.7.2",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"npm": "^6.4.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.26.11",
"vue": "^2.5.16",
"vue-chartjs": "^3.3.2",
"vue-perfect-scrollbar": "^0.1.0",
"vue-router": "^3.0.1",
"vue-table-component": "^2.0.0-alpha.1",
"vue-tables": "^1.6.44",
"vuetable": "^1.5.12",
"vuex": "^3.0.1"
}
}
I'm assuming i'm missing some sort of babel extension. I've done some research and think it might be something to do with es2015 not being understood in the "store.js" file. Any idea on what I could do fix this? I also noticed I don't have a .babelrc file, is there something I need to put in that so this will work?
I appreciate any help!
I fixed it by just reverting to react-native#0.55.4 for now.I'm also faced error by using (react-native#0.56)#babel/core 7.0.0-beta.