Error: Cannot find module 'nanoid/non-secure' - vuejs2

Question

My project was building up until today. I did not change anything just to be clear. Oddly enough, it is also happening on another NPM project that I had not touched in weeks.
I'm getting the following error (see below). I tried deleting my node_modules and running "npm install" afterwards. It appears that certain libraries are directly referencing "nanoid/non-secure" yet NPM is not installing it. When I install "nanoid" as a devDependency, I get a whole host of other errors.
===============PACKAGE.JSON===================================
{
"name": "sysifix.vue-ui",
"version": "0.0.0",
"description": "Sysifix.VueUI",
"private": true,
"author": {
"name": "Rivera, Rashad"
},
"scripts": {
"serve": "vue-cli-service serve --copy",
"build": "vue-cli-service build --mode production",
"build_dev": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint --no-fix",
"lint_fix": "vue-cli-service lint",
"clean": "",
"test": "jest",
"test_watch": "jest --watchAll"
},
"dependencies": {
"axios": "~0.21.1",
"core-js": "~3.6.5",
"moment": "~2.29.0",
"name-of": "~1.0.2",
"vue": "~2.6.12",
"vue-class-component": "~7.2.6",
"vue-property-decorator": "~9.0.0",
"vue-router": "~3.4.5",
"vue-the-mask": "~0.11.1",
"vue-unique-id": "~3.1.1",
"vuedraggable": "~2.24.3",
"vuetify": "~2.3.12",
"vuetify-confirm": "~2.0.6",
"vuex": "~3.5.1",
"vuex-class": "~0.3.2",
"vuex-router-sync": "~5.0.0"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "~5.15.0",
"#types/jest": "~26.0.14",
"#types/vue-the-mask": "~0.11.1",
"#typescript-eslint/eslint-plugin": "~4.3.0",
"#typescript-eslint/parser": "~4.3.0",
"#vue/cli-plugin-babel": "~4.5.6",
"#vue/cli-plugin-eslint": "~4.5.6",
"#vue/cli-plugin-router": "~4.5.6",
"#vue/cli-plugin-typescript": "~4.5.6",
"#vue/cli-service": "~4.5.6",
"#vue/eslint-config-airbnb": "~5.1.0",
"#vue/eslint-config-typescript": "~5.1.0",
"#vue/test-utils": "~1.1.0",
"babel-core": "~7.0.0-bridge.0",
"babel-jest": "~26.6.3",
"eslint": "~7.10.0",
"eslint-plugin-vue": "~7.0.0",
"jest": "~26.5.3",
"jest-transform-stub": "~2.0.0",
"sass": "~1.26.11",
"sass-loader": "~10.0.2",
"ts-jest": "~26.4.1",
"ts-nameof": "~5.0.0",
"typescript": "~4.0.3",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-jest": "~3.0.7",
"vue-template-compiler": "~2.6.12",
"vuetify-loader": "~1.7.1"
},
"resolutions": {},
"postcss": {
"plugins": {
"autoprefixer": {}
}
}
}
===============VUE.CONFIG.JSON================================
/* eslint-disable */
module.exports = {
publicPath: process.env.BASE_URL,
transpileDependencies: ['vuetify'],
devServer: {
compress: true,
proxy: {
'^/ui/api': {
pathRewrite: { '^/ui/api': '/api' },
target: process.env.VUE_APP_DEV_API_URL,
ws: true,
changeOrigin: true,
},
},
},
chainWebpack: (config) => {
config.module.rule('vue').uses.delete('cache-loader');
config.module.rule('js').uses.delete('cache-loader');
config.module.rule('tsx').uses.delete('cache-loader');
config.module.rule('ts').uses.delete('cache-loader');
},
parallel: true,
};
===============ERROR===================================
C:\Temp>npm install
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated eslint-loader#2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated html-webpack-plugin#3.2.0: 3.x is no longer supported
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js#2.6.12: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
added 1928 packages, and audited 1929 packages in 20s
100 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
C:\Temp>npm run serve
> sysifix.vue-ui#0.0.0 serve
> vue-cli-service serve --copy
INFO Starting development server...
ERROR Error: Cannot find module 'nanoid/non-secure'
Require stack:
- C:\Temp\node_modules\postcss\lib\input.js
- C:\Temp\node_modules\postcss\lib\parse.js
- C:\Temp\node_modules\postcss\lib\lazy-result.js
- C:\Temp\node_modules\postcss\lib\postcss.js
- C:\Temp\node_modules\#vue\component-compiler-utils\dist\compileStyle.js
- C:\Temp\node_modules\#vue\component-compiler-utils\dist\index.js
- C:\Temp\node_modules\vue-loader\lib\index.js
- C:\Temp\node_modules\#vue\cli-service\lib\config\base.js
- C:\Temp\node_modules\#vue\cli-service\lib\Service.js
- C:\Temp\node_modules\#vue\cli-service\bin\vue-cli-service.js
Error: Cannot find module 'nanoid/non-secure'
Require stack:
- C:\Temp\node_modules\postcss\lib\input.js
- C:\Temp\node_modules\postcss\lib\parse.js
- C:\Temp\node_modules\postcss\lib\lazy-result.js
- C:\Temp\node_modules\postcss\lib\postcss.js
- C:\Temp\node_modules\#vue\component-compiler-utils\dist\compileStyle.js
- C:\Temp\node_modules\#vue\component-compiler-utils\dist\index.js
- C:\Temp\node_modules\vue-loader\lib\index.js
- C:\Temp\node_modules\#vue\cli-service\lib\config\base.js
- C:\Temp\node_modules\#vue\cli-service\lib\Service.js
- C:\Temp\node_modules\#vue\cli-service\bin\vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Temp\node_modules\postcss\lib\input.js:6:18)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Temp\node_modules\postcss\lib\parse.js:5:13)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
C:\Temp>npm ls --depth=1
sysifix.vue-ui#0.0.0 C:\Temp
+-- #fortawesome/fontawesome-free#5.15.0
+-- #types/jest#26.0.14
| +-- jest-diff#25.5.0
| `-- pretty-format#25.5.0
+-- #types/vue-the-mask#0.11.1
| `-- vue#2.6.12 deduped
+-- #typescript-eslint/eslint-plugin#4.3.0
| +-- #typescript-eslint/experimental-utils#4.3.0
| +-- #typescript-eslint/parser#4.3.0 deduped
| +-- #typescript-eslint/scope-manager#4.3.0
| +-- debug#4.3.1
| +-- eslint#7.10.0 deduped
| +-- functional-red-black-tree#1.0.1
| +-- regexpp#3.1.0
| +-- semver#7.3.5
| `-- tsutils#3.21.0
+-- #typescript-eslint/parser#4.3.0
| +-- #typescript-eslint/scope-manager#4.3.0 deduped
| +-- #typescript-eslint/types#4.3.0
| +-- #typescript-eslint/typescript-estree#4.3.0
| +-- debug#4.3.1 deduped
| `-- eslint#7.10.0 deduped
+-- #vue/cli-plugin-babel#4.5.6
| +-- #babel/core#7.13.15
| +-- #vue/babel-preset-app#4.5.12
| +-- #vue/cli-service#4.5.6 deduped
| +-- #vue/cli-shared-utils#4.5.12
| +-- babel-loader#8.2.2
| +-- cache-loader#4.1.0
| +-- thread-loader#2.1.3
| `-- webpack#4.46.0
+-- #vue/cli-plugin-eslint#4.5.6
| +-- #vue/cli-service#4.5.6 deduped
| +-- #vue/cli-shared-utils#4.5.12 deduped
| +-- eslint-loader#2.2.1
| +-- eslint#7.10.0 deduped
| +-- globby#9.2.0
| +-- inquirer#7.3.3
| +-- webpack#4.46.0 deduped
| `-- yorkie#2.0.0
+-- #vue/cli-plugin-router#4.5.6
| +-- #vue/cli-service#4.5.6 deduped
| `-- #vue/cli-shared-utils#4.5.12 deduped
+-- #vue/cli-plugin-typescript#4.5.6
| +-- #types/webpack-env#1.16.0
| +-- #vue/cli-service#4.5.6 deduped
| +-- #vue/cli-shared-utils#4.5.12 deduped
| +-- UNMET OPTIONAL DEPENDENCY #vue/compiler-sfc#^3.0.0-beta.14
| +-- cache-loader#4.1.0 deduped
| +-- fork-ts-checker-webpack-plugin-v5#npm:fork-ts-checker-webpack-plugin#5.2.1
| +-- fork-ts-checker-webpack-plugin#3.1.1
| +-- globby#9.2.0
| +-- thread-loader#2.1.3 deduped
| +-- ts-loader#6.2.2
| +-- tslint#5.20.1
| +-- typescript#4.0.3 deduped
| +-- webpack#4.46.0 deduped
| `-- yorkie#2.0.0 deduped
+-- #vue/cli-service#4.5.6
| +-- #intervolga/optimize-cssnano-plugin#1.0.6
| +-- #soda/friendly-errors-webpack-plugin#1.8.0
| +-- #soda/get-current-script#1.0.2
| +-- #types/minimist#1.2.1
| +-- #types/webpack-dev-server#3.11.3
| +-- #types/webpack#4.41.27
| +-- #vue/cli-overlay#4.5.12
| +-- #vue/cli-plugin-router#4.5.6 deduped
| +-- #vue/cli-plugin-vuex#4.5.12
| +-- #vue/cli-shared-utils#4.5.12 deduped
| +-- UNMET OPTIONAL DEPENDENCY #vue/compiler-sfc#^3.0.0-beta.14
| +-- #vue/component-compiler-utils#3.2.0
| +-- #vue/preload-webpack-plugin#1.1.2
| +-- #vue/web-component-wrapper#1.3.0
| +-- acorn-walk#7.2.0
| +-- acorn#7.4.1
| +-- address#1.1.2
| +-- autoprefixer#9.8.6
| +-- browserslist#4.16.4
| +-- cache-loader#4.1.0 deduped
| +-- case-sensitive-paths-webpack-plugin#2.4.0
| +-- cli-highlight#2.1.11
| +-- clipboardy#2.3.0
| +-- cliui#6.0.0
| +-- copy-webpack-plugin#5.1.2
| +-- css-loader#3.6.0
| +-- cssnano#4.1.11
| +-- debug#4.3.1 deduped
| +-- default-gateway#5.0.5
| +-- dotenv-expand#5.1.0
| +-- dotenv#8.2.0
| +-- file-loader#4.3.0
| +-- fs-extra#7.0.1
| +-- globby#9.2.0
| +-- hash-sum#2.0.0
| +-- html-webpack-plugin#3.2.0
| +-- launch-editor-middleware#2.2.1
| +-- lodash.defaultsdeep#4.6.1
| +-- lodash.mapvalues#4.6.0
| +-- lodash.transform#4.6.0
| +-- mini-css-extract-plugin#0.9.0
| +-- minimist#1.2.5
| +-- pnp-webpack-plugin#1.6.4
| +-- portfinder#1.0.28
| +-- postcss-loader#3.0.0
| +-- ssri#~6.0.2 invalid
| +-- terser-webpack-plugin#2.3.8
| +-- thread-loader#2.1.3 deduped
| +-- url-loader#2.3.0
| +-- vue-loader-v16#npm:vue-loader#16.2.0
| +-- vue-loader#15.9.6
| +-- vue-style-loader#4.1.3
| +-- vue-template-compiler#2.6.12 deduped
| +-- webpack-bundle-analyzer#3.9.0
| +-- webpack-chain#6.5.1
| +-- webpack-dev-server#3.11.2
| +-- webpack-merge#4.2.2
| `-- webpack#4.46.0 deduped
+-- #vue/eslint-config-airbnb#5.1.0
| +-- #vue/cli-service#4.5.6 deduped
| +-- eslint-config-airbnb-base#14.2.1
| +-- eslint-import-resolver-node#0.3.4
| +-- eslint-import-resolver-webpack#0.12.2
| +-- eslint-plugin-import#2.22.1
| `-- eslint#7.10.0 deduped
+-- #vue/eslint-config-typescript#5.1.0
| +-- #typescript-eslint/eslint-plugin#4.3.0 deduped invalid
| +-- #typescript-eslint/parser#4.3.0 deduped invalid
| +-- eslint-plugin-vue#7.0.0 deduped
| +-- eslint#7.10.0 deduped
| `-- vue-eslint-parser#7.6.0
+-- #vue/test-utils#1.1.0
| +-- dom-event-types#1.0.0
| +-- lodash#4.17.21
| +-- pretty#2.0.0
| +-- vue-template-compiler#2.6.12 deduped
| `-- vue#2.6.12 deduped
+-- axios#0.21.1
| `-- follow-redirects#1.13.3
+-- babel-core#7.0.0-bridge.0
| `-- #babel/core#7.13.15 deduped
+-- babel-jest#26.6.3
| +-- #babel/core#7.13.15 deduped
| +-- #jest/transform#26.6.2
| +-- #jest/types#26.6.2
| +-- #types/babel__core#7.1.14
| +-- babel-plugin-istanbul#6.0.0
| +-- babel-preset-jest#26.6.2
| +-- chalk#4.1.0
| +-- graceful-fs#4.2.6
| `-- slash#3.0.0
+-- core-js#3.6.5
+-- eslint-plugin-vue#7.0.0
| +-- eslint-utils#2.1.0
| +-- eslint#7.10.0 deduped
| +-- natural-compare#1.4.0
| +-- semver#7.3.5
| `-- vue-eslint-parser#7.6.0 deduped
+-- eslint#7.10.0
| +-- #babel/code-frame#7.12.13
| +-- #eslint/eslintrc#0.1.3
| +-- ajv#6.12.6
| +-- chalk#4.1.0
| +-- cross-spawn#7.0.3
| +-- debug#4.3.1 deduped
| +-- doctrine#3.0.0
| +-- enquirer#2.3.6
| +-- eslint-scope#5.1.1
| +-- eslint-utils#2.1.0 deduped
| +-- eslint-visitor-keys#1.3.0
| +-- espree#7.3.1
| +-- esquery#1.4.0
| +-- esutils#2.0.3
| +-- file-entry-cache#5.0.1
| +-- functional-red-black-tree#1.0.1 deduped
| +-- glob-parent#5.1.2
| +-- globals#12.4.0
| +-- ignore#4.0.6
| +-- import-fresh#3.3.0
| +-- imurmurhash#0.1.4
| +-- is-glob#4.0.1
| +-- js-yaml#3.14.1
| +-- json-stable-stringify-without-jsonify#1.0.1
| +-- levn#0.4.1
| +-- lodash#4.17.21 deduped
| +-- minimatch#3.0.4
| +-- natural-compare#1.4.0 deduped
| +-- optionator#0.9.1
| +-- progress#2.0.3
| +-- regexpp#3.1.0 deduped
| +-- semver#7.3.5
| +-- strip-ansi#6.0.0
| +-- strip-json-comments#3.1.1
| +-- table#5.4.6
| +-- text-table#0.2.0
| `-- v8-compile-cache#2.3.0
+-- jest-transform-stub#2.0.0
+-- jest#26.5.3
| +-- #jest/core#26.6.3
| +-- import-local#3.0.2
| `-- jest-cli#26.6.3
+-- moment#2.29.0
+-- name-of#1.0.2
+-- sass-loader#10.0.2
| +-- UNMET OPTIONAL DEPENDENCY fibers#>= 3.1.0
| +-- klona#2.0.4
| +-- loader-utils#2.0.0
| +-- neo-async#2.6.2
| +-- UNMET OPTIONAL DEPENDENCY node-sass#^4.0.0
| +-- sass#1.26.11 deduped
| +-- schema-utils#2.7.1
| +-- semver#7.3.5
| `-- webpack#4.46.0 deduped
+-- sass#1.26.11
| `-- chokidar#3.5.1
+-- ts-jest#26.4.1
| +-- #types/jest#26.0.14 deduped
| +-- bs-logger#0.2.6
| +-- buffer-from#1.1.1
| +-- fast-json-stable-stringify#2.1.0
| +-- jest-util#26.6.2
| +-- jest#26.5.3 deduped
| +-- json5#2.2.0
| +-- lodash.memoize#4.1.2
| +-- make-error#1.3.6
| +-- mkdirp#1.0.4
| +-- semver#7.3.5
| +-- typescript#4.0.3 deduped
| `-- yargs-parser#20.2.7
+-- ts-nameof#5.0.0
| +-- #ts-nameof/common#4.2.1
| +-- #ts-nameof/transforms-ts#4.2.1
| +-- glob#7.1.6
| `-- typescript#4.0.3 deduped
+-- typescript#4.0.3
+-- vue-class-component#7.2.6
| `-- vue#2.6.12 deduped
+-- vue-cli-plugin-vuetify#2.0.7
| +-- null-loader#3.0.0
| +-- semver#7.3.5
| `-- shelljs#0.8.4
+-- vue-jest#3.0.7
| +-- babel-core#7.0.0-bridge.0 deduped
| +-- babel-plugin-transform-es2015-modules-commonjs#6.26.2
| +-- chalk#2.4.2
| +-- deasync#0.1.21
| +-- extract-from-css#0.4.4
| +-- find-babel-config#1.2.0
| +-- js-beautify#1.13.5
| +-- node-cache#4.2.1
| +-- object-assign#4.1.1
| +-- source-map#0.5.7
| +-- tsconfig#7.0.0
| +-- vue-template-compiler#2.6.12 deduped
| +-- vue-template-es2015-compiler#1.9.1
| `-- vue#2.6.12 deduped
+-- vue-property-decorator#9.0.0
| +-- vue-class-component#7.2.6 deduped
| `-- vue#2.6.12 deduped
+-- vue-router#3.4.5
+-- vue-template-compiler#2.6.12
| +-- de-indent#1.0.2
| `-- he#1.2.0
+-- vue-the-mask#0.11.1
+-- vue-unique-id#3.1.1
+-- vue#2.6.12
+-- vuedraggable#2.24.3
| `-- sortablejs#1.10.2
+-- vuetify-confirm#2.0.6
| +-- vue#2.6.12 deduped
| `-- vuetify#2.3.12 deduped
+-- vuetify-loader#1.7.2
| +-- decache#4.6.0
| +-- file-loader#6.2.0
| +-- loader-utils#2.0.0
| +-- vue-template-compiler#2.6.12 deduped
| +-- vuetify#2.3.12 deduped
| `-- webpack#4.46.0 deduped
+-- vuetify#2.3.12
| `-- vue#2.6.12 deduped
+-- vuex-class#0.3.2
| +-- vue-class-component#7.2.6 deduped
| +-- vue#2.6.12 deduped
| `-- vuex#3.5.1 deduped
+-- vuex-router-sync#5.0.0
| +-- vue-router#3.4.5 deduped
| `-- vuex#3.5.1 deduped
`-- vuex#3.5.1
`-- vue#2.6.12 deduped

Answer 1

I just had the same issue.
Try checking if you're installing the node module in the correct directory, i.e. where you're writing the code for your server.