Why my own theme does not work with vaadin 14

Question

I'm using my own theme in my project. If I download a fresh project, and create my own theme in "frontend" directory, it works perfect.

When I changed to my app, it shows me every time I open it...

TypeError: can't access property "appendChild", n.shadowRoot is null

In the the class where I had @Theme(Lumo.class) I changed it to my own theme @Theme(themeFolder = "eo-vaadin-orange").

I added lumo-css-framework in the package.json...

I created the theme in frontend directory...

And create my own styles.css...

I run up, but every time I get this ¿javascript? error.

Any ideas?

Thank you

==== UPDATED ======

I'm only using shadowRoot after webpack bundle all javascript clases in the theme...

This is my package.json file...

{
  "name": "no-name",
  "license": "UNLICENSED",
  "vaadin": {
    "dependencies": {
      "lit-element": "2.5.1",
      "@polymer/polymer": "3.2.0",
      "@webcomponents/webcomponentsjs": "^2.2.10",
      "@vaadin/vaadin-grid": "5.7.13",
      "@vaadin/vaadin-icons": "4.3.2",
      "@vaadin/vaadin-split-layout": "4.3.0",
      "@vaadin/vaadin-combo-box": "5.4.7",
      "@polymer/paper-behaviors": "^3.0.0-pre.27",
      "@vaadin/vaadin-core-shrinkwrap": "14.6.1",
      "@vaadin/vaadin-upload": "4.4.1",
      "@polymer/iron-behaviors": "^3.0.0-pre.26",
      "@vaadin/vaadin-dialog": "2.5.2",
      "@vaadin/vaadin-select": "2.4.0",
      "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
      "@vaadin/vaadin-app-layout": "2.2.0",
      "@vaadin/vaadin-item": "2.3.0",
      "@vaadin/vaadin-notification": "1.6.1",
      "@vaadin/vaadin-progress-bar": "1.3.0",
      "@vaadin/vaadin-date-time-picker": "1.4.0",
      "@vaadin/vaadin-ordered-layout": "1.4.0",
      "@vaadin/vaadin-login": "1.2.0",
      "@vaadin/vaadin-button": "2.4.0",
      "@vaadin/vaadin-date-picker": "4.4.1",
      "@vaadin/vaadin-text-field": "2.8.4",
      "@vaadin/vaadin-menu-bar": "1.2.2",
      "@vaadin/vaadin-custom-field": "1.3.0",
      "@vaadin/vaadin-form-layout": "2.3.0",
      "@polymer/iron-list": "3.1.0",
      "@vaadin/vaadin-accordion": "1.2.0",
      "@vaadin/vaadin-list-box": "1.4.0",
      "@polymer/iron-flex-layout": "^3.0.0-pre.26",
      "@vaadin/vaadin-checkbox": "2.5.0",
      "@vaadin/vaadin-details": "1.2.0",
      "@polymer/iron-icon": "3.0.1",
      "@vaadin/vaadin-time-picker": "2.4.0",
      "@vaadin/vaadin-context-menu": "4.5.0",
      "@vaadin/vaadin-avatar": "1.0.4",
      "@polymer/paper-styles": "^3.0.0-pre.26",
      "@polymer/paper-progress": "^3.0.0-pre.26",
      "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
      "ace-builds": "1.4.11",
      "@vaadin/vaadin-radio-button": "1.5.1",
      "@vaadin/vaadin-tabs": "3.2.0",
      "@vaadin/vaadin-lumo-styles": "1.6.0",
      "@polymer/paper-input": "^3.0.0-pre.26",
      "@vaadin/vaadin-material-styles": "1.3.2",
      "multiselect-combo-box": "2.4.2",
      "lit-html": "1.4.1"
    },
    "devDependencies": {
      "webpack-babel-multi-target-plugin": "2.3.3",
      "copy-webpack-plugin": "5.1.2",
      "compression-webpack-plugin": "4.0.1",
      "raw-loader": "3.1.0",
      "webpack-cli": "3.3.11",
      "webpack": "4.42.0",
      "chokidar": "^3.5.0",
      "webpack-merge": "4.2.2",
      "webpack-dev-server": "3.11.0",
      "ts-loader": "8.0.12",
      "typescript": "4.0.3",
      "css-loader": "4.2.1",
      "file-loader": "6.1.0",
      "extra-watch-webpack-plugin": "1.0.3",
      "lit-css-loader": "0.0.4",
      "construct-style-sheets-polyfill": "2.4.6",
      "extract-loader": "5.1.0"
    },
    "hash": "28d13379629acf9d66c70f26c453a26d2ee9c64e8b2ebb944fe35289c7ac1656"
  },
  "dependencies": {
    "lit-element": "2.5.1",
    "@polymer/polymer": "3.2.0",
    "@webcomponents/webcomponentsjs": "^2.2.10",
    "@vaadin/vaadin-grid": "5.7.13",
    "@vaadin/vaadin-icons": "4.3.2",
    "@vaadin/vaadin-split-layout": "4.3.0",
    "@vaadin/vaadin-combo-box": "5.4.7",
    "@polymer/paper-behaviors": "^3.0.0-pre.27",
    "@vaadin/vaadin-core-shrinkwrap": "14.6.1",
    "@vaadin/vaadin-upload": "4.4.1",
    "@polymer/iron-behaviors": "^3.0.0-pre.26",
    "@vaadin/vaadin-dialog": "2.5.2",
    "@vaadin/vaadin-select": "2.4.0",
    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
    "@vaadin/vaadin-app-layout": "2.2.0",
    "@vaadin/vaadin-item": "2.3.0",
    "@vaadin/vaadin-notification": "1.6.1",
    "@vaadin/vaadin-progress-bar": "1.3.0",
    "@vaadin/vaadin-date-time-picker": "1.4.0",
    "@vaadin/vaadin-ordered-layout": "1.4.0",
    "@vaadin/vaadin-login": "1.2.0",
    "@vaadin/vaadin-button": "2.4.0",
    "@vaadin/vaadin-date-picker": "4.4.1",
    "@vaadin/vaadin-text-field": "2.8.4",
    "@vaadin/vaadin-menu-bar": "1.2.2",
    "@vaadin/vaadin-custom-field": "1.3.0",
    "@vaadin/vaadin-form-layout": "2.3.0",
    "@polymer/iron-list": "3.1.0",
    "@vaadin/vaadin-accordion": "1.2.0",
    "@vaadin/vaadin-list-box": "1.4.0",
    "@polymer/iron-flex-layout": "^3.0.0-pre.26",
    "@vaadin/vaadin-checkbox": "2.5.0",
    "@vaadin/vaadin-details": "1.2.0",
    "@polymer/iron-icon": "3.0.1",
    "@vaadin/vaadin-time-picker": "2.4.0",
    "@vaadin/vaadin-context-menu": "4.5.0",
    "@vaadin/vaadin-avatar": "1.0.4",
    "@polymer/paper-styles": "^3.0.0-pre.26",
    "@polymer/paper-progress": "^3.0.0-pre.26",
    "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
    "ace-builds": "1.4.11",
    "@vaadin/vaadin-radio-button": "1.5.1",
    "@vaadin/vaadin-tabs": "3.2.0",
    "@vaadin/vaadin-lumo-styles": "1.6.0",
    "@polymer/paper-input": "^3.0.0-pre.26",
    "@vaadin/vaadin-material-styles": "1.3.2",
    "multiselect-combo-box": "2.4.2",
    "lit-html": "1.4.1",
    "lumo-css-framework": "^3.0.11"
  },
  "devDependencies": {
    "webpack-babel-multi-target-plugin": "2.3.3",
    "copy-webpack-plugin": "5.1.2",
    "compression-webpack-plugin": "4.0.1",
    "raw-loader": "3.1.0",
    "webpack-cli": "3.3.11",
    "webpack": "4.42.0",
    "chokidar": "^3.5.0",
    "webpack-merge": "4.2.2",
    "webpack-dev-server": "3.11.0",
    "ts-loader": "8.0.12",
    "typescript": "4.0.3",
    "css-loader": "4.2.1",
    "file-loader": "6.1.0",
    "extra-watch-webpack-plugin": "1.0.3",
    "lit-css-loader": "0.0.4",
    "construct-style-sheets-polyfill": "2.4.6",
    "extract-loader": "5.1.0"
  }
}

Thankssss

It seems that "Lumo" theme is not loading properly and text boxed or vaadin components are not loading properly... I don't know why, because in demo app, with ""lumo-css-framework": "^3.0.11"" it the only thing it need to load lumo clases, and then I add my own theme... any Ideas why it is now loading lumo? — chetex, Jun 07 '21 at 15:22
When you are creating new theme, this is the only thing you have to take care in order to get it working.... [[[ When using a custom theme, CSS is loaded in a Vaadin application in the following order: Lumo styles Custom theme styles Manually loaded additional style sheets (for example, using @CssImport in Flow)]]] — chetex, Jun 07 '21 at 15:23
Please don't use screenshots, where text would do. We can not search in or copy from screenshots. — cfrick, Jun 07 '21 at 16:38
It is easy to follow (visual follow). Just write what you want in search option... by the way... any help? — chetex, Jun 07 '21 at 16:48
Which version of Vaadin are you using exactly in the project where this problem occurs? Can you chare the full contents of your `package.json` file? The `lumo-css-framework` package only contains some utility classes, and it's not required by the actual Lumo theme. Does the Lumo theme work without errors if you use `@Theme(Lumo.class)` so the problem is only with your custom theme? If you have any references to `shadowRoot` in your app code (e.g. in templates), please share where it is used. — Haprog, Jun 08 '21 at 03:50
Hello @Haprog I'm usin "lumo-css-framework": "^3.0.11" in the package.json. 14.6.1 in pom.xml. If I use @Theme(Lumo.class) it works perfect, and I think my custom theme is not getting Lumo theme correctly. Is this because lumo-css-framework only has some utility clases? Why this error refers to Javascript? I'm going to update the answer and add full content of package.json. — chetex, Jun 08 '21 at 07:09
You could try updating to Vaadin 14.6.2 as it has some bugfixes but I'm not sure if any of those would affect your issue. I think most probably there's some problem with your custom theme setup or how you're using it. There's a version 4.0.10 of `lumo-css-framework` available if you want to update to that, but that's probably unrelated to your problem. The theme should work without errors even without `lumo-css-framework`. Are you using LitElement templates and calling `applyTheme()` in those? — Haprog, Jun 08 '21 at 08:58
If you can share your full project sources (e.g. in GitHub) or provide minimal instructions for how to reproduce the issue from a new project created from start.vaadin.com then it would be easier to help debug your problem. — Haprog, Jun 08 '21 at 08:59
Btw the `html {...}` style block should probably go into `document.css` instead. See: https://vaadin.com/docs/latest/ds/customization/custom-theme/#document-root-style-sheet — Haprog, Jun 08 '21 at 09:00
Thanks a lot @Haprog I changed vaadin version, and lumo version and also getting that error. I'm not usin LitElement with applyTheme. — chetex, Jun 08 '21 at 11:16
I created the issue in github... https://github.com/vaadin/flow/issues/11180 — chetex, Jun 08 '21 at 11:17

Pekka Hyvönen · Answer 1 · 2021-06-08T13:31:12.000

3

I've tested the theme project you've added to the github issue, and after removing the generated files (*.generated.js) from inside the src/main/resources/META-INF/resources/themes/*/ folders, I can install the theme artifact to another project and both themes work out fine.

So you only need to remove those generated files to get your theme working. In the meanwhile, we should move the generated theme files to frontend/generated so that those are not accidentally included to the reusable .jar file. This is the way it works in Vaadin 19+ already, but it was not backported yet for 14.6. I'll emphasize this in the v14 documentation too.

edited Jun 08 '21 at 13:31

answered Jun 08 '21 at 13:14

Pekka Hyvönen

106
3

Thank you very mucho @Pekka. I have just remove this file. I also tested in my ".m2" directory in local, that the theme-generated file is not added. Then clean-install the theme project. Clean-install my project. Run my project, but still got this error.... I tried deleting the theme-generated files also moving to "frontend/generated" folder. Any idea? – chetex Jun 08 '21 at 14:00

score 0 · Answer 2 · answered Jun 08 '21 at 15:34

0

The bug is only happening in Firefox developer edition (also in firefox)...

Browser version (if applicable): 90.0b4 (64-bit)

Chrome browser (Version 91.0.4472.77 (Official Build) (64-bit)) and Edge works fine.

answered Jun 08 '21 at 15:34

chetex

115
1
8

For me it is working with Firefox 89.0 (64-bit) on Windows 10. I wonder if there is something specific to the application you're consuming the theme in. – Pekka Hyvönen Jun 09 '21 at 13:06

Why my own theme does not work with vaadin 14

2 Answers2