3

So I'm not sure how this is happening, but when I run 'npm install' in an Angular 4 project of mine, it's completely ignoring the version of jQuery I have specified in my packages.json file, and it's installing version 1.7.4.

I have 2.2.4 specified in package.json -- I'm running bootstrap 3.3.7, and any jQuery version newer than that will break bootstrap.

The weird thing is that, when npm is running install, I get a warning message: npm WARN deprecated jQuery@1.7.4: This is deprecated. Please use 'jquery' (all lowercase). But I have no idea where thats coming from. There is nothing I'm aware of that's specifying jQuery 1.7.4 anywhere.

Any ideas?

(Edit 10-Aug-2017: Below is my package.json file, as requested. Thanks.)

{
  "name": "smartadmin",
  "version": "0.4.5",
  "license": "WRAPBOOTSTRAP",
  "angular-cli": {},
  "scripts": {
    "build:dev": "./node_modules/.bin/ng build",
    "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
    "build:aot": "./node_modules/.bin/ng build --prod --aot",
    "build:aot2": "node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --aot",
    "build": "npm run build:dev",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev": "./node_modules/.bin/ng serve",
    "server": "npm run server:dev",
    "start": "npm run server:dev",
    "test": "./node_modules/.bin/ng test",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^6.3.0",
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "X-editable": "github:vitalets/x-editable",
    "bootstrap": "^3.3.7",
    "bootstrap-colorpicker": "^2.5.1",
    "bootstrap-duallistbox": "^3.0.6",
    "bootstrap-markdown": "^2.10.0",
    "bootstrap-progressbar": "^0.9.0",
    "bootstrap-slider": "^9.8.0",
    "bootstrap-tagsinput": "^0.7.1",
    "bootstrap-timepicker": "^0.5.2",
    "chart.js": "^2.6.0",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "^0.0.7",
    "clone": "^2.1.1",
    "core-js": "^2.4.1",
    "debounce": "^1.0.2",
    "dropzone": "^4.3.0",
    "dygraphs": "^2.0.0",
    "fuelux": "^3.16.0",
    "he": "^1.1.1",
    "highcharts": "^5.0.12",
    "ion-rangeslider": "^2.1.7",
    "jquery": "^2.2.4",
    "jquery-color": "^1.0.0",
    "jquery-jcrop": "^0.9.13",
    "jquery-knob": "^1.2.11",
    "jquery-ui-npm": "^1.12.0",
    "jquery-validation": "^1.17.0",
    "jquery.maskedinput": "^1.4.1",
    "markdown": "^0.5.0",
    "morris.js": "^0.5.0",
    "ngx-bootstrap": "^2.0.0-beta.2",
    "ngx-popover": "^0.0.16",
    "nouislider": "^9.2.0",
    "raphael": "^2.2.7",
    "redux": "^3.6.0",
    "rxjs": "^5.1.0",
    "scriptjs": "^2.5.8",
    "select2": "^4.0.3",
    "smartadmin-plugins": "^1.0.20",
    "summernote": "^0.8.3",
    "to-markdown": "^3.0.4",
    "ts-helpers": "^1.1.2",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jquery": "2.0.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "css-loader": "^0.28.3",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "file-loader": "^0.11.1",
    "imports-loader": "^0.7.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.18.1",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "url-loader": "^0.5.8"
  },
  "repository": {
    "type": "git",
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2"
  },
  "bugs": {
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

UPDATE (14-Aug-2017)

I completely deleted my nodejs and npm installs using instructions I found here: How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)

Here are the commands I used:

sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node opt/local/include/node /opt/local/lib/node_modules

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom | while read f; do sudo rm /usr/local/${f}; done

sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

I also deleted a few other 'node' and 'npm' folders and files that I found while browsing the various places mentioned in that link above (including a /Users/[myusername]/.npm folder that existed)...

Then I downloaded the node v6.11.2 .pkg file from nodejs.org, and installed it. It comes with version 3.-something of npm, so I updated npm (npm install -g npm) to version 5.3.0.

Then I installed Angular/CLI 1.3.0 (the newest release as of today) npm install -g @angular/cli@1.3.0 (I updated my package.json above to reflect this new version of Angular, btw.)

Then I went into my Angular project folder and ran npm install.

AND IT INSTALLED JQUERY 1.7.4 AGAIN!!!!! WTF?!!!!!!

I copied my package.json file to an empty folder and ran npm install and it did the same thing -- jQuery 1.7.4.

Ridiculous!!! WTF is going on here?!!

If anyone has ANY ideas, I'm open to ANY suggestions. This is nuts!

  • Can you please post your packages.json file? – catbadger Aug 09 '17 at 16:38
  • Done. I edited the original post to include my package.json file. Thanks. – Laurence MacNeill Aug 10 '17 at 18:58
  • @LaurenceMacNeill it worked perfectly fine for me,i copied ur package json and ran npm install and it installed jquery 2.2.4 version without any warning...which npm version u using? and node version? – V31 Aug 10 '17 at 19:07
  • So I just put that `package.json` file in a blank folder and ran `npm install`. It did the **same thing** with the incorrect version of jquery!! What the heck?!! I'm running version 6.11.2 of NodeJS, and version 5.3.0 of NPM. – Laurence MacNeill Aug 14 '17 at 03:21

3 Answers3

4

Ok -- I finally found why it's doing this...

Apparently the jQuery color-picker has a jQuery 1.7.4 dependency built-in somewhere...

When I removed "jquery-color": "^1.0.0", from my package.json file, it installed jQuery 2.2.4 instead of 1.7.4!! So at least I figured out where it's getting jQuery 1.7.4 from...

I still don't know why that dependency is forcing npm to install the wrong version of jQuery for the entire project, though... That's just weird...

  • I found that there's an unreleased newer version of jquery-color in npm, 3.0.0-alpha.1. I can't vouch for whether it's safe to use, but switching to it does remove the broken dependency. – JamHandy Aug 13 '18 at 13:55
  • Good to know that they've fixed the dependency in the newest version. Now we just wait until it's no longer alpha- or beta-testing. Shouldn't be too long, I would think. Thanks for catching that! – Laurence MacNeill Aug 13 '18 at 17:18
  • To npm install, ^1.0.0 (format: major.minor.patch) means install the latest version at the minor level (that's what the ^ means). ~1.0.0 would mean install the latest version at the patch level. It took me a while and a fair bit of hair pulling to twig this. Hope that helps anyone else coming across this. – AlphaBeta May 29 '19 at 11:02
2

Apparently npm turned case sensitive or something and when npm reads the the library jquery.color it loads the old deprecated jQuery 1.7.4 ... I was able to get it to work with the jquery.color reference by running this

npm install
npm install jquery

Which will force the right version of jquery to be installed after the wrong one is installed

LeandroM
  • 86
  • 7
0

Try to delete node_modules folder and do a npm cache clean.

Run npm install again

Also check in your index.html file if you are not accidentally overwrite the jQuery version with a CDN line.

user3411864
  • 624
  • 2
  • 12
  • 27
  • Yep. I've done all of that. I had to use `npm cache clean --force` because I'm using a version of npm greater than 5.0.0. And then I checked it with `npm cache verify` and it showed 0 bytes in the cache. I have **no** idea why it's doing this! Totally crazy! – Laurence MacNeill Aug 14 '17 at 03:22
  • And your index.html page is clean? – user3411864 Aug 14 '17 at 06:38
  • I checked my index.html and there is no reference to jQuery in it. I copied my package.json file to a completely empty folder and ran `npm install` there. It still installed the same incorrect version of jQuery with no index.html file in there. – Laurence MacNeill Aug 14 '17 at 13:56