Bower: Cannot find suitable version for Angular - javascript

this is probably a newbie question, but i do not understand why bower (1.7.9) cannot find a suitable version for Angular when i run:
bower install
or when it cannot find a suitable version for Angular-translate when i run:
bower update
(Why does it even give me a different error when i run either command in the above?)
I have updated every package to their latest versions and I did not find any package which would require an older version of Angular. Here is my bower.json:
{
"name": "test",
"homepage": "http://www.google.nl",
"version": "0.2.1",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"angular": "1.5.9",
"angular-animate": "1.6.0-rc.2",
"angular-bootstrap": "2.3.0",
"angular-cookies": "1.6.0-rc.2",
"angular-hotkeys": "0.2.2",
"angular-i18n": "1.6.0-rc.2",
"angular-route": "1.6.0-rc.2",
"angular-translate": "2.13.1",
"angular-sanitize": "1.6.0-rc.2",
"angular-translate-loader-static-files": "2.8.1",
"angular-ui-bootstrap-datetimepicker": "2.0.3",
"angular-loading-bar": "0.9.0",
"jquery": "3.1.1",
"moment": "2.17.1",
"ng-dialog": "0.6.4",
"ng-focus-if": "1.0.7",
"ng-tags-input": "3.1.1",
"ngInfiniteScroll": "https://github.com/hlsolutions/ngInfiniteScroll.git#scroll-on-any-lement",
"angular-ui-select": "0.19.6",
"placeholders": "https://github.com/jamesallardice/Placeholders.js.git#~4.0.1",
"angular-atomic-notify": "~1.0.3",
"underscore": "https://github.com/components/underscore.git#~1.8.3",
"angulartics-google-analytics": "0.4.0",
"angular-ui-tinymce": "~0.0.17",
"angular-collection": "~0.5.2",
"angular-mocks": "1.6.0-rc.2",
"angular-translate-handler-log": "2.13.1"
}
}

The problem I see is related to:
"angular-translate": "2.13.1",
...
"angular-translate-loader-static-files": "2.8.1",
The problem is:
- you are requesting exact versions
- angular-translate-loader-static-files also requests angular-translate, but it demands the same version (2.8.1)
- bower does not allow multiple version of the same library
One solution would be:
"angular-translate-loader-static-files": "2.13.1"
The same problem is with angular, you should use "angular": "1.6.0-rc.2" since you already request this version for other modules that depend on angular.
However, this is not necessarily the best way to go, because for example I see you are using some libraries that want angular < 1.6 (ngInfiniteScroll) so you will not be able to make these work in your project if you really want to use the 1.6 version.
A better idea would be to require version more loosely (e.g. "angular": ">=1.5.x"), then let bower find the most suitable version for all your dependencies - but this will most likely require you to work with older versions or risk incompatibility issues.

It often happens when you already have an old version of a library (here it's angular) downloaded in your bower_components of your project.
Generally to fix this, i just empty my bower_components before redo a bower install and everything get back to the normal.
Hope this will help in your case.

See if the final answer to a similar question helps
"Instead of running bower install library -save I did added the latest versions of the libraries directly to my bower.json and added the resolutions..."

Related

How to update a deprecated package in package-lock.json for VuePress site

I'm completely new to javascript and npm, but I'm wanting to contribute to a certain open-source project. The project uses VuePress to create a website for the documentation. An issue the site is having is that some pages are not being indexed properly. I did some digging and found that one of the packages in the package-lock.json file is deprecated, and I think it is the one that is causing the indexing issues. But I'm not sure how to go about replacing this package with a newer one.
First I searched for the docsearch package in the package-lock.json and found that it was deprecated:
$ grep docsearch package-lock.json
"docsearch.js": "^2.5.2",
"node_modules/docsearch.js": {
"resolved": "https://registry.npmjs.org/docsearch.js/-/docsearch.js-2.6.3.tgz",
"deprecated": "This package has been deprecated and is no longer maintained. Please use #docsearch/js.",
"docsearch.js": "^2.5.2",
"docsearch.js": {
"resolved": "https://registry.npmjs.org/docsearch.js/-/docsearch.js-2.6.3.tgz",
I searched throughout the project and found in the file docs/.vuepress/config.js that Algolia uses DocSearch, because I found a comment in the file
// See https://community.algolia.com/docsearch/behavior.html#autocompleteoptions
So I contacted Algolia and they confirmed that some of the pages are not being indexed and it's because the project is use a deprecated version of docsearch. They said to upgrade. So that's what I'm trying to do, but I'm getting in the weeds.
I first needed to figure out what package I needed to upgrade to, so I searched for the old docsearch online at https://www.npmjs.com/package/docsearch.js/v/2.1.6 and found the authors' message "This package has been deprecated and is no longer maintained. Please use #docsearch/js." So then I go to the website for the new package https://www.npmjs.com/package/#docsearch/js and I see that I can install the package simply enough with npm install #docsearch/js#3. But when I run that command, I still see that the old deprecated version is in the package-lock.json file.
grep docsearch package-lock.json
"#docsearch/js": "^3.3.0",
"node_modules/#docsearch/css": {
"resolved": "https://registry.npmjs.org/#docsearch/css/-/css-3.3.0.tgz",
"node_modules/#docsearch/js": {
"resolved": "https://registry.npmjs.org/#docsearch/js/-/js-3.3.0.tgz",
"#docsearch/react": "3.3.0",
"node_modules/#docsearch/react": {
"resolved": "https://registry.npmjs.org/#docsearch/react/-/react-3.3.0.tgz",
"#docsearch/css": "3.3.0",
"node_modules/#docsearch/react/node_modules/#algolia/autocomplete-preset-algolia": {
"node_modules/#docsearch/react/node_modules/algoliasearch": {
"docsearch.js": "^2.5.2",
"node_modules/docsearch.js": {
"resolved": "https://registry.npmjs.org/docsearch.js/-/docsearch.js-2.6.3.tgz",
"deprecated": "This package has been deprecated and is no longer maintained. Please use #docsearch/js.",
"#docsearch/css": {
"resolved": "https://registry.npmjs.org/#docsearch/css/-/css-3.3.0.tgz",
"#docsearch/js": {
"resolved": "https://registry.npmjs.org/#docsearch/js/-/js-3.3.0.tgz",
"#docsearch/react": "3.3.0",
"#docsearch/react": {
"resolved": "https://registry.npmjs.org/#docsearch/react/-/react-3.3.0.tgz",
"#docsearch/css": "3.3.0",
"docsearch.js": "^2.5.2",
"docsearch.js": {
"resolved": "https://registry.npmjs.org/docsearch.js/-/docsearch.js-2.6.3.tgz",
And I still see it when I run the following command:
$npm ls docsearch.js
myproject#0.1.0 ~/Documents/code/OpenSourceProject
└─┬ vuepress#1.9.7
└─┬ #vuepress/theme-default#1.9.7
└── docsearch.js#2.6.3
I expected this old docsearch to be replaced by the new docsearch package, which is where I am confused. Doesn't this mean that the old docsearch is still being used in some way? Also, when I ran that command #docsearch/js is add to the package.json file, whereas before the old docsearch was not in there.
Please let me know if I need to provide more details - and thanks in advance for your guidance.

Typescript: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`

I've an npm command line application that i've built not so long ago and it worked fine. Now that i've updated it, and due to changes in the versions of typescript over the period, i'm getting an error when i want to run this package which says:
Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
Here is the package.json file:
{
"name": "initialiseur",
"version": "4.0.4",
"main": "src index.ts",
"author": "#crispengari",
"license": "MIT",
"bin": "src/index.ts",
"description": "THIS IS A BOILER PLATE THAT INITIALIZE A NODE EXPRESS BACKEND FOR TYPESCRIPT AND JAVASCRIPT",
"scripts": {
"watch": "tsc -w",
"start": "ts-node src/index.ts",
"dev": "nodemon dist/index.ts",
"start:fast": "tsnd --respawn src/index.ts"
},
"dependencies": {
"#types/inquirer": "^7.3.3",
"#types/node": "^17.0.42",
"#types/npm": "^7.19.0",
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "^3.1.5",
"dotenv": "^10.0.0",
"inquirer": "^8.1.2",
"node-fetch": "^3.2.6",
"octokit": "^1.7.2",
"ts-node": "^10.8.1",
"typescript": "^4.6.5"
},
"devDependencies": {
"#types/node-fetch": "^2.6.1",
"nodemon": "^2.0.12",
"ts-node-dev": "^2.0.0"
},
"bugs": {
"url": "https://github.com/CrispenGari/initialiseur/issues"
},
"homepage": "https://github.com/CrispenGari/initialiseur#readme",
"keywords": [
"node.ts",
"node.js",
"typescript",
"ts",
"nodejs-backend",
"javascript",
"js",
"express",
"backend"
]
}
When i'm testing it locally by running:
npm start
# or
yarn start
Everything is working fine, but after publishing it to npm to start it i run the following command:
npx initialiseur
Then I'm getting the error from a command line. The whole error is as follows:
C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536
ts.Debug.assert(typeof typeReferenceDirectiveName === "string", "Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.");
^
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
at Object.resolveTypeReferenceDirective (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536:18)
at C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:131:51
at Array.map (<anonymous>)
at Object.resolveTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:130:31)
at actualResolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116673:163)
at resolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116973:26)
at processTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118455:31)
at findSourceFileWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118340:21)
at findSourceFile (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118195:26)
at processImportedModules (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118601:25)
From the above error i can tell that the problem maybe comming from typescript, I'v tried changing version of typescript but still it's not working. In my src/index.ts it looks as follows:
#!/usr/bin/env ts-node
import path from "path";
import inquirer from "inquirer";
import { writeFile, readFile } from "fs/promises";
....
Running npm install -g ts-node#latest fixed it for me. I needed to update my globally installed ts-node version.
To reiterate previous answers for yarn users:
yarn add -D ts-node#latest solved it for me. These are my versions now:
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
The top answer probably shouldn't recommend a downgrade.
Edit
If you continue to face issues, try deleting your node_modules folder and reinstalling by running yarn.
If it still doesn't work, you may need to add these versions to your resolutions field in package.json, and then run yarn install --force.
{
"resolutions": {
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
}
}
However, I consider this a bit of a temporary measure, and I wouldn't recommend leaving the resolutions in forever.
Getting the same as of a couple of days.
Reverting ts-node to v10.6.0 fixes it for me.
It is hapening in typescript 4.7.
I lowered my typescript to 4.6.4, and the error disappeared
Update the Typescript as #alex-totolici has suggested: npm i typescript#latest
And update the ts-node: npm i ts-node#latest
Remeber to distinguish between global ts-node and package ts-node;
You have to use npx to run local ts-node
> npx ts-node ...
Anyway, this is what I finally found after 30 mins of repeatedly rm -rf node_nodules and yarn add ts-node#latest.
These changes in the package.json worked for me.
"ts-node": "~10.7.0"
"typescript": "~4.6.4"
Try updating all you packages including typescript
To update typescript: npm i typescript#latest
Here is a package to check for updates: https://www.npmjs.com/package/npm-check-updates
I had the same issue, and already ran the latest versions of typescript and ts-node.
Updating nodemon npm install -g nodemon#latest solved it for me!
I just figure out that the problem was coming from inquirer import when i commented the import it just worked:
// import inquirer from "inquirer";
I suspect that the inquirer types and my current typescript version are not lining up. So you must as well try to debug by commenting imports if the above answers did not work for you.
I don't know exactly why but the problem comes from a #type package, you can find a line similar to this /// <reference types='node' /> if you delete it won't have this problem anymore
Using ts-node-dev version 2.0.0 fixes this problem.
Note you'll have to manually specify the version as by default this version may not get installed.
Running this solved the issue:
npm install --save-dev ts-node#latest
Try newer version of typescript and ts-node .
i have the same problem but it works fine now with below version:
"ts-node": "~10.7.0",
"typescript": "~4.6.4",
ERROR in Debug Failure. False expression: Non-string value passed to ts.resolveTypeReferenceDirective, likely by a wrapping package working
with an outdated resolveTypeReferenceDirectives signature. This is probably not a problem in TS itself.
I still see the issue even after updating the version of Typescript & ts-node with latest versions.

How to set a requirement of a dependency to my own repo

I'm having a multitude of issues where I will not pass npm audit due to prototype pollution in version of lodash bfore 4.17.15. I am usng the package join-monster, which uses stem/nesthydration, which has unupdated lodash packages. I have fixed the issues and pushed then to my own personal repo, but I do not know how to pont he dependency requirement to my won repo.
"join-monster": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/join-monster/-/join-monster-2.1.1.tgz",
"integrity": "sha512-Z/JJeDvQ8wS18rl1ytQ/teEiHXe90spTNqJmiUyRPQg/tREWTeY+meiAMTjqu8ltfsk6jer8TfDGUSoHil4Crg==",
"requires": {
"#stem/nesthydrationjs": "0.4.0",
"debug": "^4.1.0",
"deprecate": "^1.0.0",
"generatorics": "^1.0.8",
"graphql-relay": "^0.5.0",
"lodash": "^4.17.15"
},
In the above code, all I want to do is make the #stem/nesthydrationjs point to my won repo, instead of the 0.4.0 version that has severe vulnerability issues. Can anyone help?
You should not directly edit the code in your node_modules directory. To resolve this issue properly, you have two options:
Fork the repository #stem/nesthydrationjs, make your changes there, and create pull request upstream. Then, update package.json to point at this new upstream version.
Fork the repository #stem/nesthydrationjs, make you changes, and update package.json to point at your fork.
Option 1 would be preferred because it contributes back to a free/libre/open source project. Option 2 might be used in the interim until the upstream accepts your pull request.

Using multiple AngularJS versions in a project with Bower

I've been trying to upgrade medium sized project from Angular version 1.2.16 to 1.6.4. The problem here is, I can't jump from one version to another, so I have to use both versions at the same time in the project. However, I couldn't able to find a well prepared guide to follow. There are some different steps which is described in SO or in Github pages. But anyhow, I couldn't manage it.
Here are some SO links that I've been reading during this time.
1 - Multiple versions of AngularJS in one page
2 - Supporting Multiple Versions of AngularJS
3 - https://github.com/angular-translate/angular-translate/wiki/How-to-use-a-different-version-of-AngularJS-using-Bower
And below is my bower.json:
{
"name": "takademi",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.16",
"json3": "~3.3.1",
"es5-shim": "~3.1.0",
"angular-cookies": "1.2.16",
"angular-sanitize": "1.2.16",
"angular-animate": "1.2.16",
"angular-route": "1.2.16",
"angular-bindonce": "~0.3.1",
"restangular": "~1.4.0",
"angular-base64": "~2.0.2",
"lodash": "~2.4.1"
},
"devDependencies": {
"angular-mocks": "1.2.16",
"angular-scenario": "1.2.16"
},
"appPath": "app"
}
Can you suggest any good guide, blog, video tutorial for me to follow?
Thanks in advance.

How to include modified javascript library using Bower in a Rails app?

So I'm using angular in a rails app and using bower to manage my javascript libraries. There have been a few times that have come up where I've had to modify the functionality of certain bower packages. What I've done previously is just copy the source file pulled in by bower, make the changes, then save that in my assets directory and pull that file in directly in my application.js manifest.
Is there a better/cleaner way to do this so that all my javascripts are still pulled in via bower? I know that for gemfiles, I can fork a repo and reference that version in my gemfile, is there something similar for bower?
Are there any best practices here? Thanks a bunch.
EDIT: Also I'm using a bower.json file, something like this:
{
"lib": {
"name": "bower-rails generated lib assets",
"dependencies": {
"angular": "latest",
"angular-ui-router": "latest",
"angular-animate": "latest",
"bootstrap-sass-official": "latest",
"angular-deckgrid":"latest",
...
}
},
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {
// "three.js" : "https://raw.github.com/mrdoob/three.js/master/build/three.js"
}
}
}
You can do the same for bower packages. Fork the repo, make your changes, and then create your own Bower package following this. Once it has been registered, you can just bower install <your-package> directly every time :)

Categories