We use bower in our project to download front end related scripts. The project is hosted on Heroku. bower install is part of the build script. Everything was working fine until yesterday. Suddenly, bower is unable to install AngularJS.
Here's my bower.json
{
"name": "laravel.app",
"version": "0.0.1",
"dependencies": {
"jquery": "3.2.0",
"angular": "1.6.4",
"bootstrap": "3.3.7",
"angular-ui-router": "^0.4.2",
"angular-sanitize": "1.6.4",
"angular-route": "1.6.4",
"angular-toastr": "^2.1.1",
"components-font-awesome": "^4.7.0",
"angular-google-picker": "^0.2.2",
"foundation-datepicker": "^1.5.6",
"chart.js": "^2.7.0",
"ng-lodash": "^0.5.0",
"moment": "^2.18.1"
}
}
The error while building is
bower angular#~1.4 cached https://github.com/angular/bower-angular.git#1.4.14
bower angular#~1.4 validate 1.4.14 against https://github.com/angular/bower-angular.git#~1.4
bower ECONFLICT Unable to find suitable version for angular
This is breaking the build of new commits in Heroku as well. Why could this be happening? All was fine until yesterday.
The core of the error is this
ECONFLICT Unable to find suitable version for angular
When you specify dependencies for you app via Bower, some of the packages might rely on different versions of the same library.
bower install angular#latest --save -F
Related
I was trying to deploy my reactjs rails app on heroku.
Everything seems okay until I get this error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
remote: Error: Cannot find module '#babel/preset-react'
The app works fine in my localhost. I tried deleting my node_modules folder then running npm install but the error persisted(only when deploying at heroku).
My package.json:
{
"name": "App",
"private": true,
"dependencies": {
"#rails/webpacker": "5.4.0",
"#types/react": "^17.0.18",
"#types/react-dom": "^17.0.9",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react_ujs": "^2.6.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.14.5",
"#babel/plugin-transform-react-jsx": "^7.14.9",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"webpack-dev-server": "^3.11.2"
}
}
I managed to deploy it. I based my answer here: Why is devDependencies' pruning skipped even if NPM_CONFIG_PRODUCTION is true?
What I did was set:
NPM_CONFIG_PRODUCTION= false
YARN_PRODUCTION = false
YARN_CONFIG_PRODUCTION = false
I tested changing ENV values and this what worked for me.
This can set at heroku settings under config vars
Heroku defaults to NODE_END=production. How does this affect your build?
You have #babel/preset-react in devDependencies. When you do npm i (or yarn) to install packages with NODE_ENV=production, npm (or yarn) only installs dependencies (it wont install devDependencies).
To get around this, you can -
either override NODE_ENV. ($ NODE_ENV=development npm i)
Run npm i --only=dev before you build
To be on the safe side, revert the value on NODE_ENV to production when you run in production environment (Heroku in your case).
I have dug a lot to fix this issue in my current angularjs project, the same issue came in my previous project and at that time I skipped the issue using --force. But this time I can't proceed with --force. I am attaching the error log and package.json here. Please go through it and suggest me a solution.
What I have tried is uninstall/reinstall node.js, npm cache clean, run commands as Administrator etc. The issue comes when I try to install the node packages using npm install command.
Edit : After I install phantomjs globally the error changed, updated the screenshot below.
Error
Package.json
{
"name": "yourprojectname",
"version": "0.1.0",
"author": "CMF",
"homepage": "http://recomm.com/",
"private": true,
"devDependencies": {
"grunt": "~0.4",
"grunt-angular-templates": "~0.5",
"grunt-browser-output": "0.1.0",
"grunt-contrib-clean": "~0.5",
"grunt-contrib-concat": "~0.3",
"grunt-contrib-connect": "~0.6",
"grunt-contrib-copy": "~0.5",
"grunt-contrib-cssmin": "~0.7",
"grunt-contrib-htmlmin": "~0.1",
"grunt-contrib-jshint": "~0.9",
"grunt-contrib-less": "~0.8",
"grunt-contrib-uglify": "~0.2",
"grunt-contrib-watch": "~0.6",
"grunt-dom-munger": "~3.4",
"grunt-karma": "~0.8.3",
"grunt-ng-annotate": "~0.10.0",
"grunt-replace": "^1.0.1",
"karma": "~0.12.6",
"karma-chrome-launcher": "~0.1.3",
"karma-firefox-launcher": "~0.1.3",
"karma-jasmine": "~0.1.5",
"karma-mocha-reporter": "~0.2.5",
"karma-phantomjs-launcher": "~0.1.4",
"load-grunt-tasks": "~0.2"
}
}
Versions I have
grunt - v0.4.5
grunt-cli - v1.2.0
node - v6.11.0
npm - 3.10.11
The template being considered is https://github.com/StephenGrider/ReduxSimpleStarter
After git clone, the folder is merely 160kb.
But after npm install, the folder is 620MB.
Is there a way to make it as small as possible? It was suspected that the react native stuff (including the binaries?) is really huge, so can something be done such as npm install --minus react-native if react native is not needed at all?
P.S. a few days have passed, and today Apr 2, 2017, the same repo, the same as before, after npm install, is only 138MB. I guess somebody fixed the dependencies (of the npm modules registry), so that some 500MB of stuff is not installed.
There is no react-native in the starter project that you referenced. :)
So, that is not what is causing the large directory.
It is typical to have a large node_modules directory. This directory is usually placed in the .gitignore (or similar) so that it is not committed to the source control repository.
In order to track dependencies, use the --save and --save-dev switches in npm install and make sure to commit your package.json
Also, when you npm install for production, use the npm install --production switch to exclude dev dependencies.
When you run npm install all dependencies will be installed as from package.json,
this includes devDependencies and dependencies (using npm you can also control what to install or not as Davin Tryon pointed out). Below an extract from your package.json you can see all dep included. Also you could consider ignoring node_modules on git or svn to do use space on your repository.
You could consider manually remove the node_modules directory if you do not work on a project so you can save some space on you HD.
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4"
}
After i execute npm install, i see that the version of the typings is 1.0.3. But in my package.json, i wrote the exacty the verion that i want. Any idea what is going on ?
is npm always trying to install the latest ?
"devDependencies": {
"nodemon": "^1.9.2",
"promise": "^7.1.1",
"request": "^2.72.0",
"require-dir": "^0.3.0",
"typescript": "^1.8.7",
"typings": "^0.7.12"
}
When i run :
typings -v
1.0.3
Try remove the ^ and write only:
"typings": "0.7.12"
I am using Angular 1.2.6. I am trying to use bower to install angular-animate and ngAnimate-animate.css. I've tried installing (bower install --save angular-animate), uninstalling several time and diff code on github from 1.2.16 and 1.2.17.
Bower keeps wanting to install the older version of angular-animate 1.2.16 compatible with Angular 2.1.12.
All of my passing karma unit tests fail after installing angular-animate as well.
I keep on getting this error. Any ideas why?
bower angular-animate#* cached git://github.com/angular/bower-angular-animate.git#1.2.16
bower angular-animate#* validate 1.2.16 against git://github.com/angular/bower-angular-animate.git#*
bower angular#1.2.16 cached git://github.com/angular/bower-angular.git#1.2.16
bower angular#1.2.16 validate 1.2.16 against git://github.com/angular/bower-angular.git#1.2.16
bower angular#>=1 cached git://github.com/angular/bower-angular.git#1.2.16
bower angular#>=1 validate 1.2.16 against git://github.com/angular/bower-angular.git#>=1
Unable to find a suitable version for angular, please choose one:
1) angular#1.2.6 which resolved to 1.2.6 and is required by angular-cookies#1.2.6, angular-mocks#1.2.6, angular-resource#1.2.6, angular-route#1.2.6, angular-sanitize#1.2.6, angular-scenario#1.2.6, temp
2) angular#1.2.16 which resolved to 1.2.16 and is required by angular-animate#1.2.16
3) angular#>=1 which resolved to 1.2.16 and is required by angular-bootstrap#0.10.0
Prefix the choice with ! to persist it to bower.json
[?] Answer:
I have entered !1 and !3 before with no success.
bower.json
{
"name": "temp",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
"bootstrap": "~3.1.1",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"angular-bootstrap": "~0.10.0",
"angular-toggle-switch": "~0.3.0",
"angular-animate": "~1.2.16",
"ngAnimate-animate.css": "~0.1.1"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
},
"resolutions": {
"angular": ">=1"
}
}
Related question on SO.
Angular moved angular-animate out of core to it's own dependency in v1.2
Two part solution
ngAnimate-animate has a js file, app/bower_components/ngAnimate-animate.css/animate.js that needs to be added to files: in karma.conf.js
bower info angular-animate and install the version specific to your angular version. In this case, bower install angular-animate#1.2.6 --save