CODEWITHSUNDEEP
polymerpolymer-2.xvaadin-elements
batgerel.e
batgerel.e

Reputation: 857

How to load polymer components correctly

I have a question with loading polymer element. When i configure my bower.json file dependency not loading correctly.

Here is my bower.json file:

{
  "name": "Example",
  "description": "Example",
  "version": "1.0.0",
  "license": "https://vaadin.com/license/cvtl-1",
  "authors": [
    "Vaadin Ltd"
  ],
  "dependencies": {
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
    "iron-form": "PolymerElements/iron-form#^2.0.0",
    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
    "polymer": "Polymer/polymer#^2.0.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
    "iron-icon": "^2.0.0",
    "paper-toast": "^2.0.0",
    "vaadin": "vaadin/vaadin#10.0.0-alpha8",
    "vaadin-grid": "vaadin/vaadin-grid#4.1.0-beta1",
    "vaadin-charts": "vaadin/vaadin-charts#6.0.0-alpha10",
    "vaadin-valo-theme": "vaadin/vaadin-valo-theme#2.0.0-alpha5",
    "vaadin-tabs": "^1.0.0",
    "app-layout": "polymerelements/app-layout#2.1.0"
    // "wysiwyg-e" : "^2.1.3"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
  },
  "private": true,
  "resolutions": {
    "vaadin-grid": "4.1.0-beta1",
    "vaadin-charts": "6.0.0-alpha10",
    "vaadin-valo-theme": "2.0.0-alpha5"
  }
}

I need to load correctly app-layout and wysiwyg-e. What did i do wrong ? Any suggestion ?

Upvotes: 1

Views: 118

Answers (2)

Viktor Lukashov
Viktor Lukashov

Reputation: 338

The reason for version conflicts with such bower.json file is that the individual Vaadin components (vaadin-grid, vaadin-charts, etc) are effectively included twice: once through the vaadin/vaadin meta-package and the second time explicitly.

Generally, having a bower dependency only to the vaadin meta-package should be enough:

"dependencies": {
  "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
  "iron-form": "PolymerElements/iron-form#^2.0.0",
  "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
  "polymer": "Polymer/polymer#^2.0.0",
  "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
  "iron-icon": "^2.0.0",
  "paper-toast": "^2.0.0",
  "vaadin": "vaadin/vaadin#10.0.0-alpha8",
  "wysiwyg-e": "^2.1.3"
},
"devDependencies": {
  "web-component-tester": "Polymer/web-component-tester#^6.0.0"
}

This will pull a matching set of versions of vaadin-grid, vaadin-charts, and all other Vaadin components.

Note also, that you seem to be using an outdated alpha8 version. Please consider upgrading to the latest beta: vaadin/vaadin#10.0.0-beta8.

In case if you really need to use a specific version of say vaadin-grid, the way to do it is either to not use the vaadin meta-dependency at all, or to specify that version of it which includes the desired version of vaadin-grid (e.g. vaadin-grid#4.1.0-alpha1 is a part of vaadin#10.0.0-alpha5, but there is not version of the vaadin meta-package that includes the 4.1.0-beta1 version of vaadin-grid).

Upvotes: 0

mishu
mishu

Reputation: 5397

By looking at the other dependencies you're loading from the same directory, I would say that the path is case sensitive, and that for app-layout you only used lower case letters, instead of the PascalCase format, so maybe you should try:

"app-layout": "PolymerElements/app-layout#2.0.1",

(I am guessing you meant 2.0.1 there, not 2.1.0, since 2.0.5 seems to be the most recent version)

And for wysiwyg-e you can try:

"wysiwyg-e": "miztroh/wysiwyg-e#^2.1.3"

Upvotes: 0

Related Questions