_.each throws error after npm update - node.js

Everything was running fine, before I run 'npm update' to push my code with latest libraries. Now I am getting error:
{ message: 'Method Map.prototype.has called on incompatible receiver #',
stack: 'TypeError: Method Map.prototype.has called on incompatible receiver #\n at Clone.has ()\n at get (/Users/myproject/node_modules/kareem/index.js:418:11)\n at Clone.Kareem.pre (/Users/myproject/node_modules/kareem/index.js:350:16)\n at Clone.Schema.pre (/Users/myproject/node_modules/mongoose/lib/schema.js:1135:20)\n at Schema.extend (/Users/myproject/node_modules/mongoose-schema-extend/index.js:73:15)\n at Object.createSchema (/Users/myproject/framework/nDatabase/bin/system.js:341:89)\n at /Users/myproject/framework/nDatabase/bin/system.js:384:24\n at Array.forEach ()\n at Object.resolveSchemaDependancy (/Users/myproject/framework/nDatabase/bin/system.js:356:25)\n at /Users/myproject/framework/nDatabase/bin/system.js:406:24\n at /Users/myproject/node_modules/lodash/lodash.js:4917:15\n at baseForOwn (/Users/myproject/node_modules/lodash/lodash.js:3002:24)\n at /Users/myproject/node_modules/lodash/lodash.js:4886:18\n at Function.forEach (/Users/myproject/node_modules/lodash/lodash.js:9334:14)\n at Object.traverseSchemas (/Users/myproject/framework/nDatabase/bin/system.js:401:11)\n at Object.extractRawSchema (/Users/myproject/framework/nDatabase/bin/system.js:418:40)' }
Error indicate some issues with loadash library while using:
_.each({}, (object, name) =>{
/////
});
Here is list of dependancies I am using :
"dependencies": {
"async": "^2.6.1",
"bcrypt": "^1.0.3",
"body-parser": "^1.18.3",
"chai": "^4.1.2",
"cron": "^1.3.0",
"express": "^4.16.3",
"java": "^0.9.1",
"kafka-node": "^2.6.1",
"lodash": "^4.17.10",
"mocha": "^4.1.0",
"mocha-suit": "^0.5.3",
"mongodb": "^3.1.0-beta4",
"mongoose": "^5.1.6",
"mongoose-schema-extend": "0.2.0",
"node-cache": "^4.2.0",
"recursive-copy": "^2.0.8",
"redis": "^2.8.0",
"request-promise": "^4.2.2",
"should": "^13.2.1",
"stompit": "^0.25.0",
"uuid": "^3.2.1",
"winston": "^2.4.3",
"winston-daily-rotate-file": "^3.2.1",
"winston-elasticsearch": "^0.7.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.11",
"meow": "^5.0.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-dev-middleware": "^3.1.3"
}
Please help me to resolve this Issue.

Related

Issue "TypeError: external_defu_ is not a function" running generate on gitlab

every time I try to launch the generate for my nuxt project on gitlab, I get back for every page generated a strange error,
[error] /Dashboard
TypeError: external_defu_ is not a function
at server.js:12669:45
at Array.reduce (<anonymous>)
at new runtime_BaseScheme (node_modules/#nuxtjs/auth-next/dist/runtime.mjs:883:0)
at new runtime_Oauth2Scheme (node_modules/#nuxtjs/auth-next/dist/runtime.mjs:1137:0)
at auth (node_modules/.cache/nuxt/auth.js:45:0)
at createApp (node_modules/.cache/nuxt/index.js:291:0)
at runNextTicks (node:internal/process/task_queues:61:5)
at listOnTimeout (node:internal/timers:526:9)
at processTimers (node:internal/timers:500:7)
at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)
This prevents the page from generating itself correctly.
While if I launch the project locally, with the same version of node, it generates everything correctly.
Do you know how I can solve the problem?
In gitlab's docker I'm using node v12.16.3.
This is my package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"author": "Alessandro",
"private": true,
"scripts": {
"generate": "ENV=production nuxt generate",
generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"#nuxtjs/auth": "^4.9.1",
"#nuxtjs/auth-next": "5.0.0-1613647907.37b1156",
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/pwa": "^3.3.4",
"#vue/composition-api": "^0.6.7",
"aws-sdk": "^2.610.0",
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"browser-image-compression": "^1.0.14",
"caniuse-lite": "^1.0.30001257",
"chart.js": "^2.9.3",
"child_process": "^1.0.2",
"compass": "^0.1.1",
"cookie": "^0.4.0",
"cookie-universal-nuxt": "^2.1.4",
"cors": "^2.8.5",
"cross-fetch": "^3.1.5",
"file-saver": "^2.0.2",
"fs": "0.0.1-security",
"gapi-script": "^1.2.0",
"install": "^0.13.0",
"js-cookie": "^2.2.1",
"kaleidoscopejs": "1.0.18",
"leaflet": "^1.6.0",
"lodash": "^4.17.15",
"md5": "^2.2.1",
"moment": "^2.29.3",
"multer": "^1.4.2",
"net": "^1.0.2",
"node-fetch": "^2.6.7",
"node-orientdb-http": "^0.1.1",
"npm": "^8.13.1",
"nuxt": "^2.15.0",
"nuxt-gmaps": "^1.2.10",
"nuxt-i18n": "^6.3.0",
"nuxt-leaflet": "0.0.19",
"nuxt-sass-resources-loader": "^2.0.5",
"p-iteration": "^1.1.8",
"pannellum": "github:saidmoya12/pannellum",
"panolens": "^0.12.1",
"proxy": "^1.0.2",
"readline": "^1.3.0",
"simple-analytics-vue": "^1.1.5",
"tls": "0.0.1",
"videojs": "^1.0.0",
"videojs-panorama": "^0.1.7",
"vue": "2.6.14",
"vue-chartjs": "^3.5.0",
"vue-cookie-accept-decline": "^5.3.1",
"vue-expandable-image": "^0.1.0",
"vue-google-login": "^2.0.3",
"vue-pannellum": "^0.5.3",
"vue-plausible": "^1.2.1",
"vue-rangedate-picker": "^1.0.0",
"vue-rangedate-picker-winslow": "^1.0.8",
"vue-server-renderer": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vue-tooltipster": "^1.2.0",
"vue-upload-multiple-image": "^1.1.4",
"vue2-google-maps": "^0.10.7",
"vue2-leaflet": "^2.6.0",
"vuedraggable": "^2.23.2",
"vuejs-panorama": "^1.1.9",
"vuejs-vr": "^1.2.2",
"vuetify": "^2.5.12",
"vuex-persistedstate": "^3.0.1",
"webpack": "^4.45.0"
},
"devDependencies": {
"#aceforth/nuxt-optimized-images": "^1.4.0",
"#nuxt/bridge": "npm:#nuxt/bridge-edge#^3.0.0-27268729.5b8e10f",
"#nuxt/image": "^0.7.1",
"#nuxt/types": "^2.14.12",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/eslint-config": "^3.1.0",
"#nuxtjs/eslint-module": "^2.0.0",
"#nuxtjs/google-analytics": "^2.4.0",
"#nuxtjs/vuetify": "^1.12.3",
"babel-eslint": "^10.0.1",
"eslint": "^7.5.0",
"eslint-plugin-nuxt": ">=0.4.2",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^9.0.0",
"lqip-loader": "^2.2.1",
"responsive-loader": "^2.3.0",
"rimraf": "^3.0.2",
"sharp": "^0.30.7",
"sqip-loader": "^1.0.0",
"webp-loader": "^0.6.0"
}
}
Thank you very much
Alessandro
I also had this issue on Nuxt2 Bridge using #nuxtjs/auth-next. The solution is to transpile defu during the build:
nuxt.config.js
export default defineNuxtConfig({
// ...
build: {
transpile: [
'defu',
],
},
})
The issue and possible solutions are described in the docs: https://v3.nuxtjs.org/guide/going-further/esm/

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

Node Sass does not yet support your current environment: Vuetify upgrade fails

I'm trying to upgrade Vuetify 1.5.+ to 2.0.+ but facing some issues while adding node-sass library. Initially when I installed sass-loader": "^8.0.0" it showing some syntax error as follows.
So in order to fix the issue, I just downgraded sass-loader from 8.+ to 7.+ after that it throwing some other issue as follows.
After that, I just tried different versions and all showing the same issue and within the link its shows as supported - https://github.com/sass/node-sass/releases/tag/v4.9.4(OSX and node version 10). Even I'd tried different node version and nothing seems to be working.
Current node version : v10.16.3
package.json :
{
/***.. ................ other details ******/
"dependencies": {
"#mdi/font": "^3.5.95",
"#nuxtjs/axios": "^5.3.6",
"#nuxtjs/pwa": "^2.6.0",
"await-to-js": "^2.1.1",
"boxen": "^3.1.0",
"cli-table": "^0.3.1",
"colors": "^1.3.3",
"commander": "^2.19.0",
"cross-env": "^5.2.0",
"debug": "^4.1.1",
"emittery": "^0.4.1",
"express": "^4.16.4",
"fast-levenshtein": "^2.0.6",
"glob": "^7.1.3",
"jsonfile": "^5.0.0",
"knex": "^0.19.2",
"lodash": "^4.17.11",
"material-design-icons": "^3.0.1",
"mkdirp": "^0.5.1",
"moment": "^2.24.0",
"monaco-editor": "^0.16.2",
"monaco-editor-webpack-plugin": "^1.7.0",
"monaco-themes": "^0.2.5",
"mssql": "^5.0.5",
"mysql": "^2.16.0",
"nano-assign": "^1.0.1",
"nodemailer": "^6.3.0",
"nuxt": "^2.8.1",
"nuxt-material-design-icons": "^1.0.4",
"oracledb": "^3.1.2",
"pg": "^7.9.0",
"pify": "^4.0.1",
"popper.js": "^1.14.7",
"rmdir": "^1.2.0",
"sql-formatter": "^2.3.2",
"sqlite3": "^4.0.8",
"stripe": "^6.32.0",
"tcp-port-used": "^1.0.1",
"v-hotkey": "^0.3.1",
"vee-validate": "^2.2.0",
"vue": "^2.6.10",
"vue-click-outside": "^1.0.7",
"vue-drag-resize": "^1.3.2",
"vue-draggable-resizable": "^2.0.0-rc1",
"vue-monaco": "^0.3.1",
"vue-recaptcha": "^1.1.1",
"vue-shortcuts": "^1.1.2",
"vue-shortkey": "^3.1.7",
"vue-stripe-elements-plus": "^0.2.9",
"vuetify": "^2.0.18",
"vuetify-loader": "^1.2.1",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"chai": "^4.2.0",
"chokidar": "^2.1.5",
"cross-env": "^5.1.4",
"deepmerge": "^4.0.0",
"devtron": "^1.4.0",
"electron": "^4.1.4",
"electron-builder": "^20.39.0",
"electron-devtools-installer": "^2.2.4",
"electron-renderer": "^2.0.4",
"eslint": "6.4.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": ">=12.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": ">=2.16.0",
"eslint-plugin-jest": ">=22.3.0",
"eslint-plugin-mocha": "^5.3.0",
"eslint-plugin-node": ">=8.0.1",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": ">=4.0.1",
"eslint-plugin-standard": ">=4.0.0",
"eslint-plugin-vue": "^5.2.2",
"fibers": "^4.0.1",
"jsdoc": "^3.5.5",
"minami": "^1.2.3",
"mocha": "^6.0.2",
"node-sass": "4.9.4",
"nodemon": "^1.18.9",
"nyc": "^14.1.1",
"prettier": "^1.16.4",
"sass": "^1.22.12",
"sass-loader": "^7.1.0",
"should": "^13.2.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
}
}
I'd tried following things but nothing seems to be working.
Tried different versions and done npm rebuild node-sass
Cleared npm cache, removed node_modules and then npm install
I hope this will be helpful to you.
first, check version of sass & sass-loader library.
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
"deepmerge": "^4.0.0"
}
second, check your syntax loaderOptions and chainWebpack.
you have to use semicolon ; in SCSS rules
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/sass/main.scss"`,
},
},
},
chainWebpack: config => {
["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
config.module.rule('scss').oneOf(match).use('sass-loader')
.tap(opt => Object.assign(opt, { data: `#import '~#/sass/main.scss';` }))
})
}
}

"module 'crypto' does not exist" with MongoDB

I have a react native app that I'm building along with MongoDB (using a remote MongoDB Atlas db, installed with the npm mongodb driver), and I keep running into the following error:
bundling failed: Error: Unable to resolve module "crypto" from "../node_modules/mongodb/lib/db.js" : Module "crypto" does not exist in the Haste module map or in these directories: ...
I understand that npm crypto is no longer used, as it is now a built-in Node module, but what's going on here if it's built-in then?
How do I resolve this issue? My dependency file is listed below:
"dependencies": {
"#remobile/react-native-mongoose": "^1.0.1",
"#tradle/react-native-http": "^2.0.1",
"assert": "^1.4.1",
"asyncstorage-down": "^4.0.1",
"babel-preset-env": "^1.7.0",
"body-parser": "^1.18.3",
"browserify-zlib": "^0.1.4",
"bson": "^3.0.0",
"console-browserify": "^1.1.0",
"constants-browserify": "^1.0.0",
"create-react-class": "^15.6.3",
"dns.js": "^1.0.1",
"domain-browser": "^1.2.0",
"eslint": "^3.19.0",
"events": "^3.0.0",
"express": "^4.16.3",
"https-browserify": "0.0.1",
"husky": "^0.14.3",
"kerberos": "0.0.24",
"lint-staged": "^7.2.0",
"moment": "^2.22.2",
"mongodb": "^3.0.10",
"mongojs": "^2.6.0",
"mongoose": "^5.1.6",
"morgan": "^1.9.0",
"native-base": "^2.6.0",
"path-browserify": "0.0.0",
"process": "^0.11.10",
"querystring-es3": "^0.2.1",
"react": "^16.3.1",
"react-native": "^0.55.4",
"react-native-crypto": "^2.1.2",
"react-native-level-fs": "^3.0.1",
"react-native-os": "^1.2.1",
"react-native-randombytes": "^3.2.0",
"react-native-size-matters": "^0.1.1",
"react-native-splash-screen": "^3.0.7",
"react-native-tcp": "^3.3.0",
"react-native-udp": "^2.3.1",
"react-navigation": "^2.4.1",
"readable-stream": "^1.0.33",
"require_optional": "^1.0.1",
"stream-browserify": "^1.0.0",
"string_decoder": "^0.10.31",
"timers-browserify": "^1.4.2",
"tty-browserify": "0.0.0",
"url": "^0.10.3",
"util": "^0.11.0",
"vm-browserify": "0.0.4"
}

Resources