Hi All,
I used Predix web app starter (1.0.46 version) as a reference app in my application and we have added pretty much more functionality according to our requirement. during the initial time to till now whenever there is some version conflicts comes while running bower install i selected component version and saved it added under the resolutions section in bower.json to resolve conflicts .
here is my bower.json
{
"name": "predix-webapp-starter",
"version": "^3.1.0",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"public/bower_components",
"test",
"sass",
"tutorials"
],
"dependencies": {
"circular-json": "",
"hopscotch": "^0.2.6",
"polymer": "^1.6.1",
"px-view": "^1.1.1",
"app-route": "PolymerElements/app-route#^0.9.1",
"px": "^1.4.3",
"px-card": "^0.6.1",
"px-layout-design": "^0.4.3",
"px-starter-kit-design": "^0.7.0",
"px-theme": "^2.0.0",
"px-view-header": "^0.2.0",
"px-path-guide": "^0.0.2",
"px-login": "^1.0.0",
"px-context-browser": "^1.6.7",
"iron-ajax": "~1.4.4",
"px-data-table": "^2.1.3",
"es6-promise": "~3.3.1",
"moment": "^2.17.1",
"px-rangepicker": "~1.3.10",
"px-dropdown": "^3.1.1",
"px-widths-responsive-design": "^0.4.4",
"px-vis-timeseries": "^2.1.2",
"px-app-nav": "^1.10.9",
"px-spacing-design": "^0.4.4",
"px-buttons-design": "^1.1.7",
"marked-element": "^1.3.1",
"px-dark-theme": "^1.0.10",
"px-simple-bar-chart": "^1.9.1",
"px-colors-design": "^0.3.0",
"px-inbox": "^2.2.3",
"px-widget-cards": "^3.0.4",
"px-popover": "^2.0.9",
"chart.js": "chartjs#^2.7.1",
"px-demo": "^3.1.2",
"px-button-group-design": "^2.0.6"
},
"resolutions": {
"px-datetime-common": "^0.7.0",
"app-localize-behavior": "^0.10.2",
"iron-ajax": "^2.0.0",
"px-theme": "^2.0.0",
"px-colors-design": "^0.3.0",
"px-defaults-design": "^1.0.2",
"px-typography-design": "^2.0.0",
"iron-icon": "^1.0.7",
"iron-resizable-behavior": "^2.0.1",
"px-popover": "^2.0.9",
"promise-polyfill": "^1.0.0",
"px-tooltip": "^1.0.0",
"px-simple-chart-common-behavior": "^1.6.0",
"iron-dropdown": "^1.5.4",
"neon-animation": "^2.0.0",
"px-d3-imports": "^1.0.1",
"px-functions-design": "^1.0.0",
"px-mixins-design": "^1.0.0",
"iron-iconset-svg": "^1.0.9",
"iron-flex-layout": "^1.0.0",
"px-moment-imports": "^0.0.1",
"px-number-formatter": "^3.0.4",
"px-dropdown": "^4.0.0",
"iron-a11y-keys": "^2.0.0",
"px-card": "^0.6.1",
"iron-overlay-behavior": "^2.2.0",
"px-vis": "^2.0.0",
"px-overlay": "^2.0.0",
"pxd3": "^4.7.0",
"px-headings-design": "^0.3.1",
"iron-location": "^0.8.1",
"px-view-header": "^0.2.0",
"px-deck-selector": "^2.0.0",
"iron-fit-behavior": "1 - 2",
"px-app-nav": "^1.10.9",
"px-helpers-design": "^0.3.0",
"px-buttons-design": "^1.1.7",
"webcomponentsjs": "^0.7.24"
},
"devDependencies": {
"px-button-group-design": "^2.0.6"
}
}
Now my problem is i want to remove dependency from resolutions to get away like below warning.
Please note that, app-localize-behavior#1.0.2, app-localize-behavior#0.10.2 depends on iron-ajax#^1.0.0 which resolved to iron-ajax#1.4.4 predix-webapp-starter depends on iron-ajax#~1.4.4 which resolved to iron-ajax#1.4.4 px-login#1.0.8 depends on iron-ajax#^1.4.3 which resolved to iron-ajax#1.4.4 px-simple-bar-chart#1.9.1 depends on iron-ajax#~1.4.3 which resolved to iron-ajax#1.4.4 app-localize-behavior#2.0.2 depends on iron-ajax#1 - 2 which resolved to iron-ajax#1.4.4 px-d3-imports#1.0.5, px-typeahead#2.3.2 depends on iron-ajax#^2.0.0 which resolved to iron-ajax#2.1.3 px-api-viewer#2.1.4 depends on iron-ajax#^2.0.4 which resolved to iron-ajax#2.1.3 Resort to using iron-ajax#^2.0.0 which resolved to iron-ajax#2.1.3 Code incompatibilities may occur
in above warning if we see we have declared iron-ajax version under the dependencies as "iron-ajax": "~1.4.4" and under the resolutions we have "iron-ajax": "^2.0.0" but if we see in bower_components its taking 2.1.3 version of iron-ajax
my aim is I don't want to use any dependencies two version in my project or in another words i want to remove dependency from resolutions to get away like above warning.
Can any one please suggest me how can i achieve this.
Answer by Megha.Gupta12@ge.com · Dec 14, 2018 at 10:34 AM
@Greg Stroup : Thanks for your reply .
one thing i see after updating the bower dependency version while running the app i am getting below error. here i have attached my updated bower.json [link text][1]
Error in plugin "sass" Message: public\seed-theme.scss Error: Undefined variable: "$graybg". on line 21 of public/seed-theme.scss from line 2 of public/index-inline.scss
------------------------------------------^ as i saw in seed-theme.scss we have defined variable like this $px-page-main-content-area-background-color: $graybg; and we are importing scss file ( @import "px-colors-design/_settings.colors.scss"; ) in seed-theme.scss so i search $graybg with this updated version of px-colors-design/_settings.colors.scs there i didnt find $graybg so for the testing i just tried to check $graybg in older version of px-colors-design/_settings.colors.scs and there value for $graybg is $graybg : rgb(139,141,143); so i tried to use $px-page-main-content-area-background-color: rgb(139,141,143); then i started getting below error [[17:00:03] Starting 'compile:sass'... Error: Could not import-page-main-content-area-background-color: $graybg;
px-meta-lists-design/_meta.lists.scss
from any of the following locations: C:\GE\Build\Project\public\elements\seed-app\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\elements\seed-app\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design-sass\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\sass-px-meta-lists-design\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\sass\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design-sass\sass\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\sass-px-meta-lists-design\sass\px-meta-lists-design_meta.lists.scss Error: Could not import
px-meta-lists-design/_meta.lists.scss
from any of the following locations: C:\GE\Build\Project\public\elements\seed-footer\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\elements\seed-footer\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design-sass\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\sass-px-meta-lists-design\stylesheets\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design\sass\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\px-meta-lists-design-sass\sass\px-meta-lists-design_meta.lists.scss C:\GE\Build\Project\public\bower_components\sass-px-meta-lists-design\sass\px-meta-lists-design_meta.lists.scss Error: Could not import
px-list-inline-design/_objects.list-inline.scss
from any of the following locations: C:\GE\Build\Project\public\elements\seed-footer\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\elements\seed-footer\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design\stylesheets\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design-sass\stylesheets\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\sass-px-list-inline-design\stylesheets\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design\sass\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\px-list-inline-design-sass\sass\px-list-inline-design_objects.list-inline.scss C:\GE\Build\Project\public\bower_components\sass-px-list-inline-design\sass\px-list-inline-design_objects.list-inline.scss [17:00:04] Finished 'compile:sass' after 365 ms [1]: /storage/temp/4853-bower-copy.txt Now i want to understand below 1.where i can define $graybg value so that i will run with this Error: Undefined variable: "$graybg". 2. how can i resolve these error Could not import
px-meta-lists-design/_meta.lists.scss
@Greg Stroup : Can you please suggest me.
Answer by Greg Stroup · Dec 04, 2018 at 09:12 AM
The predix-webapp-starter works using Polymer 1. So, you must use components built for Polymer 1. If you look at this chart, you should choose components from the "Cirrus" column: