Vue packages version mismatch - vue.js

I'm trying to deploy my old nuxt project again with new changes but I get this error even tho I removed the node_modules folder, package-lock.json & refreshed the npm cache and of course run npm i after all of this + I don't have neither of these packages in my package.json.
Here's the error I'm getting after running npm run dev:
Vue packages version mismatch:
- vue#3.2.45
- vue-server-renderer#2.7.14
This may cause things to work incorrectly. Make sure to use the same version for both.
here's my package.json:
├── #nuxtjs/axios#5.13.6
├── #nuxtjs/dotenv#1.4.1
├── #nuxtjs/vercel-builder#0.22.1
├── #nuxtjs/vuetify#1.12.3
├── #stripe/stripe-js#1.46.0
├── body-parser#1.20.1
├── cookie-parser#1.4.6
├── cookieparser#0.1.0
├── core-js#3.26.1
├── cors#2.8.5
├── express#4.18.2
├── gsap#npm:#gsap/shockingly#3.11.3
├── nuxt-gsap-module#1.7.2
├── nuxt#2.15.8
├── stripe#8.222.0
├── underscore#1.13.6
└── vuex-persistedstate#4.1.0
I have tried all I can but cannot come up with a solution. Is there anything I could try to make this work?

Please execute this command.
npm install vue#2.7.14 --save

Related

NPM 7 Workspaces - Multiple node_modules?

I'm having trouble running my app with NPM 7 Workspaces. I am expecting an npm install from the root folder to create a node_modules folder for each of my workspaces, similar to Lerna. However, when I run npm install at the root, I only get one node_modules, at the root level. Is this expected?
Example structure before npm i:
.
├── package.json -> { "workspaces": ["packages/*"] }
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Example structure after npm i (note only one package-lock.json/node_modules):
.
├── package.json -> { "workspaces": ["packages/*"] }
├── **node_modules**
├── **package-lock.json**
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Node version: 16.4.2
NPM version: 7.18.1
Update: After messing around a with a million things, I finally went and deleted the project and recloned it. It worked after this. I believe it was due to the fact that I was on an old node/npm version when I originally cloned the project. Must have been some funky state lingering around there. Anyway hope this helps anyone with the same problem!

Force include node_modules in package?

I want to npm publish my dist dir that looks like this:
dist
├── README.md
├── node_modules
│   └── clap
│   └── dist
│   └── es
│   ├── index.js
│   └── index.js.map
├── package.json
...
└── utils
├── memory-stream.js
├── memory-stream.js.map
├── mysql-users.js
├── mysql-users.js.map
├── sql.js
├── sql.js.map
├── utils.js
└── utils.js.map
Notice how there's a node_modules dir in there. I want to publish that along with everything else.
The files in there are compiled, but they're part of a local package not distributed on npm, so I do want it bundled.
My code references it like this:
var index = require('../node_modules/clap/dist/es/index.js');
So it should work perfectly fine.
The problem is that it looks like npm publish has it hardcoded to ignore directories called node_modules. Is there any way to override that behaviour?

How to include *forked* github branch as dependency in package.json

I'm trying to include a fork of https://github.com/segmentio/analytics-react-native
When I include "#segment/analytics-react-native": "^1.1.0", in my package.json
I see the following
├── README.md
├── RNAnalytics.podspec
├── android
├── build
├── ios
├── package.json
└── src
But if I include the fork of the library as "analytics-react-native": "account_name/analytics-react-native#master",, I see
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── RELEASING.md
├── package.json
├── packages
└── tsconfig.json
Of course, build fails with the forked version..
How Can I use the forked version as a dependency?
You want:
"git://github.com/your-account/analytics-react-native.git#branch_name": "^1.1.0"
See the documentation. #commit-ish can be any valid gitref (such as a commit, branch, or tag).
Edit: Ah, per the edit, the repo is a monorepo with the desired package.json a few levels down. This is currently an open request in Yarn. There's a similar request for npm which was closed. There are some good suggestions for compromises in that thread, but there's no one solution to that problem yet.

grunt-karma ^2.0.0 does NOT use karma#0.13.x and it breaks

When installing grunt-karma npm install grunt-karma --save-dev it install karma^1.0.0 with it. And that breaks the tests:
Warning: .then() only accepts functions but was passed: [object Undefined], [object Undefined]...
It's true that while installing grunt-karma I get the following npm WARN message:
npm WARN peerDependencies The peer dependency grunt#>=0.4.x included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#^0.13.0 || >= 0.14.0-rc.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing fsevents#1.0.12
But my npm version is 2.14.20
This is what gets installed:
grunt#1.0.1 node_modules\grunt
├── grunt-known-options#1.1.0
├── path-is-absolute#1.0.0
├── eventemitter2#0.4.14
├── rimraf#2.2.8
├── exit#0.1.2
├── nopt#3.0.6 (abbrev#1.0.9)
├── iconv-lite#0.4.13
├── coffee-script#1.10.0
├── glob#7.0.5 (fs.realpath#1.0.0, inherits#2.0.1, inflight#1.0.5, once#1.3.3)
├── minimatch#3.0.2 (brace-expansion#1.1.5)
├── findup-sync#0.3.0 (glob#5.0.15)
├── grunt-cli#1.2.0 (resolve#1.1.7)
├── js-yaml#3.5.5 (esprima#2.7.2, argparse#1.0.7)
├── dateformat#1.0.12 (get-stdin#4.0.1, meow#3.7.0)
├── grunt-legacy-log#1.0.0 (hooker#0.2.3, colors#1.1.2, underscore.string#3.2.3, lodash#3.10.1, grunt-legacy-log-utils#1.0.0)
└── grunt-legacy-util#1.0.0 (getobject#0.1.0, async#1.5.2, hooker#0.2.3, which#1.2.10, underscore.string#3.2.3, lodash#4.3.0)
karma#1.0.0 node_modules\karma <-- here is the issue
├── graceful-fs#4.1.4
├── di#0.0.1
├── rimraf#2.5.2
├── mime#1.3.4
├── qjobs#1.1.4
├── colors#1.1.2
├── source-map#0.5.6
├── http-proxy#1.14.0 (eventemitter3#1.2.0, requires-port#1.0.0)
├── isbinaryfile#3.0.0
├── dom-serialize#2.2.1 (custom-event#1.0.0, void-elements#2.0.1, extend#3.0.0, ent#2.2.0)
├── glob#7.0.5 (path-is-absolute#1.0.0, fs.realpath#1.0.0, inherits#2.0.1, inflight#1.0.5, once#1.3.3)
├── minimatch#3.0.2 (brace-expansion#1.1.5)
├── useragent#2.1.9 (lru-cache#2.2.4)
├── tmp#0.0.28 (os-tmpdir#1.0.1)
├── bluebird#3.4.1
├── connect#3.4.1 (utils-merge#1.0.0, parseurl#1.3.1, debug#2.2.0, finalhandler#0.4.1)
├── optimist#0.6.1 (wordwrap#0.0.3, minimist#0.0.10)
├── body-parser#1.15.2 (content-type#1.0.2, bytes#2.4.0, depd#1.1.0, qs#6.2.0, raw-body#2.1.7, on-finished#2.3.0, http-errors#1.5.0, debug#2.2.0, iconv-lite#0.4.13, type-is#1.6.13)
├── expand-braces#0.1.2 (array-unique#0.2.1, array-slice#0.2.3, braces#0.1.5)
├── chokidar#1.6.0 (path-is-absolute#1.0.0, inherits#2.0.1, glob-parent#2.0.0, async-each#1.0.0, is-binary-path#1.0.1, is-glob#2.0.1, readdirp#2.0.1, anymatch#1.3.0)
├── socket.io#1.4.8 (has-binary#0.1.7, debug#2.2.0, socket.io-parser#2.2.6, socket.io-adapter#0.4.0, engine.io#1.6.11, socket.io-client#1.4.8)
├── log4js#0.6.37 (semver#4.3.6, readable-stream#1.0.34)
├── lodash#3.10.1
├── combine-lists#1.0.0 (lodash#4.13.1)
└── core-js#2.4.0
grunt-karma#2.0.0 node_modules\grunt-karma
└── lodash#3.10.1
The solution is simply install the the version that grunt-karma needs according to the docs:
This current version uses karma`#0.13.x ...
Although it the tables it seems to depend of different versions of karma for devDependencies(1.x || ^0.13.0) and peerDependencies(^0.13.0 || >= 0.14.0-rc.0)
So, to fix it you have to manually install the right version of karma until the issue is fixed:
npm install karma#0.13.22

yeoman with gulp-angular generator - ENOENT error

Was trying to generate an Angular app with gulp tasks using this generator, after the generator has finished and bower and NP, had finished installing their dependencies as well, I got the following error message:
browser-sync#0.9.1 node_modules/browser-sync
├── path#0.4.9
├── commander#2.1.0
├── opn#0.1.2
├── dev-ip#0.1.7
├── browser-sync-client#0.1.9
├── ua-parser-js#0.6.2
├── optimist#0.6.1 (wordwrap#0.0.2, minimist#0.0.10)
├── http-proxy#1.0.3 (eventemitter3#0.1.2)
├── lodash#2.2.1
├── resp-modifier#0.0.4
├── cl-strings#0.0.5 (chalk#0.4.0, lodash#2.4.1)
├── gaze#0.5.1 (globule#0.1.0)
├── browser-sync-control-panel#0.0.5 (through#2.3.4)
├── portscanner-plus#0.1.0 (q#1.0.1, portscanner#0.2.3)
├── socket.io#0.8.7 (policyfile#0.0.4, redis#0.6.7, socket.io-client#0.8.7)
├── connect#2.13.1 (uid2#0.0.3, methods#0.1.0, cookie-signature#1.0.1, pause#0.0.1, debug#0.8.1, fresh#0.2.0, qs#0.6.6, bytes#0.2.1, buffer-crc32#0.2.1, raw-body#1.1.3, batch#0.5.0, cookie#0.1.0, compressible#1.0.0, negotiator#0.3.0, send#0.1.4, multiparty#2.2.0)
└── url#0.7.9 (querystring#0.1.0, punycode#1.0.0)
execvp(): No such file or directory
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)
Any assistance is much appreciated
As the OP #Oleg Tikhonov noted in the comments:
Remove the npm_components directory and re-install everything
rm -rf npm_componenets