Frontend build failed when does a clean build with vaadin flow 23.4.0

Flow
1

Hi all,

I did a fresh build on my Windows 11 64 bit with Vaadin flow 23.4.0, JDK 17, npm 10.7.0. and got error when vaadin tries to build frontend as below:

C:\Users\git\iad\src\main\webapp' directory
2024-05-13 00:24:17.402  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2024-05-13 00:24:17.402  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/@granite-elements/granite-qrcode-decoder/node_modules/lit-element/lit-element.js
2024-05-13 00:24:17.402  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module not found: Error: Can't resolve 'lit-html/lib/shady-render.js' in 'C:\Users\git\iad\node_modules\@granite-elements\granite-qrcode-decoder\node_modules\lit-element'
2024-05-13 00:24:17.402  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/@granite-elements/granite-qrcode-scanner/node_modules/lit-element/lit-element.js
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module not found: Error: Can't resolve 'lit-html/lib/shady-render.js' in 'C:\Users\git\iad\node_modules\@granite-elements\granite-qrcode-scanner\node_modules\lit-element'
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/@material/mwc-base/node_modules/lit-element/lit-element.js
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module not found: Error: Can't resolve 'lit-html/lib/shady-render.js' in 'C:\Users\git\iad\node_modules\@material\mwc-base\node_modules\lit-element'
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/lit-html/directives/class-map.js 6:106
2024-05-13 00:24:17.403  INFO 4192 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module parse failed: Unexpected token (6:106)

I did many tries as:

npm cache clear --force
npm install --save-dev lit lit-html lit-element

but the error still happens.

If i try in MacOS, then the build works fine.

image
image1825×520 79.5 KB

Regards
Thang Le

2

You don’t need to use npm.

Run

mvn vaadin:clean

3

It could also be that you are using a npm package that depends on an old lit version

4

Thanks @SimonMartinelli , @marcoc_753

I ran: mvn vaadin:clean-frontend and got my package.json like below:

{
  "name": "no-name",
  "license": "UNLICENSED",
  "devDependencies": {
    "@types/leaflet": "^1.9.12",
    "@webpack-cli/serve": "^1.6.1",
    "leaflet": "^1.9.4",
    "webpack-cli": "^4.10.0"
  },
  "overrides": {
    "chokidar": "$chokidar",
    "leaflet": "$leaflet"
  },
  "dependencies": {
    "lit": "^3.1.3"
  }
}

When i build : mnv install and run project. I got other lit version auto generated by Vaadin and it caused error as above mention.

"vaadin": {
    "dependencies": {
      "@adobe/lit-mobx": "2.0.0",
      // other libs
      "lit": "^2.6.1",
}

So, I removed my config: "lit": "^3.1.3", rebuild project and it works.

Because Vaadin is using old "lit": "^2.6.1". If i want to upgrade all to latest "lit": "^3.1.3". How to do ?

5

You upgrade Vaadin to the latest version where the latest Lit version is used.

6

i am using: <vaadin.version>23.4.0</vaadin.version>. Should be latest version of Vaadin 23.

7

I mean 24. Lit 3 is only used there. Vaadin 23 ends free support in the next months; staying there does not make sense.

1 Like
8

@granite-elements\granite-qrcode-decoder seems to use imports from lit-html 1.x, that do not exist in later versions (lit-html/lib/shady-render.js)

1 Like
9

Thanks for note @marcoc_753

10

sure. will plan to upgrade to Vaadin 24 soon