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

Answer 1

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.

Answer 2

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.