Struggling to use Material Theme in Vaadin 14 project

Hi,

When replacing @Theme(value=Lumo.class, …) by @Theme(value=Material.class, …) I get a whole bunch of webpack errors.

It starts with the following:

  Failed to find the following imports in the `node_modules` tree:
      - @vaadin/vaadin-material-styles/typography.js
      - @vaadin/vaadin-material-styles/color.js

After that, I get a whole bunch of ERROR messages all looking like this:

2019-10-29 01:11:38.437 ERROR 46192 --- [        webpack]
 dev-webpack                              : ERROR in ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle-styles.js
2019-10-29 01:11:38.437 ERROR 46192 --- [        webpack]
 dev-webpack                              : Module not found: Error: Can't resolve '@vaadin/vaadin-material-styles/color.js' in '/repo/my-webapp/node_modules/@vaadin/vaadin-app-layout/theme/material'
2019-10-29 01:11:38.437 ERROR 46192 --- [        webpack]
 dev-webpack                              :  @ ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle-styles.js 14:0-49
2019-10-29 01:11:38.437 ERROR 46192 --- [        webpack]
 dev-webpack                              :  @ ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle.js
2019-10-29 01:11:38.437 ERROR 46192 --- [        webpack]
 dev-webpack                              :  @ ../target/frontend/generated-flow-imports.js

Any idea what going wrong?

Thank you!

Kristof.

Hey Kristof,

Did you run install?

Hi Joacim,

Yes, I also try to fix it by following the suggestions on https://github.com/vaadin/flow/issues/6036

I keep getting Module not found errors in a whole bunch of packages like this:

ERROR in ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle-styles.js
Module not found: Error: Can't resolve '@vaadin/vaadin-material-styles/color.js' in 'myproject/node_modules/@vaadin/vaadin-app-layout/theme/material'
2019-11-11 22:16:26.537 ERROR 26369 --- [        webpack]
 dev-webpack                              :  @ ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle-styles.js 14:0-49
2019-11-11 22:16:26.538 ERROR 26369 --- [        webpack]
 dev-webpack                              :  @ ../node_modules/@vaadin/vaadin-app-layout/theme/material/vaadin-drawer-toggle.js
2019-11-11 22:16:26.538 ERROR 26369 --- [        webpack]
 dev-webpack                              :  @ ../target/frontend/generated-flow-imports.js

I didn’t do a bower install like it is suggested on https://cdn.vaadin.com/vaadin-material-styles/1.2.3/demo/
Since I’m using vaadin 14, so I assume I need to do a npm install for this.

I see this as a dependency in my package.json file: “@vaadin/vaadin-material-styles”: “github:vaadin/vaadin-material-styles”

I’m kinda new to node.js. I guess this is OK, but I need to investigate further.

Kristof.

Hi Kristof,

Try running mvn clean install. If that fails, what does your pom.xml look like?