Since the update from Vaadin 22.0.x to the new Vaadin 23.0.0 an error occurs when integrating icons
Simple java code example:
HorizontalLayout layout = new HorizontalLayout();
layout.add(new Icon(VaadinIcon.CREDIT_CARD));
Error:
Uncaught TypeError: Cannot read properties of undefined (reading 'SVG') (webpack-internal:///../node_modules/.pnpm/@vaadin/icon@23.0.0/node_modules/@vaadin/icon/src/vaadin-icon-svg.js:41:176)
Stacktrace:
Uncaught TypeError: Cannot read properties of undefined (reading 'SVG')
at isValidSvg (vaadin-icon-svg.js?8e5a:32:53)
at ensureSvgLiteral (vaadin-icon-svg.js?8e5a:43:1)
at renderSvg (vaadin-icon-svg.js?8e5a:58:1)
at Icon.__svgChanged (vaadin-icon.js?30dc:212:14)
at Object.runMethodEffect [as fn] (property-effects.js?855e:1038:1)
at runEffects (property-effects.js?855e:140:1)
at Icon._propertiesChanged (property-effects.js?855e:1922:1)
at Icon.Kw.s._propertiesChanged (FlowClient.js?2d7e:1006:26298)
at Icon._flushProperties (properties-changed.js?7749:384:1)
at Icon._invalidateProperties (property-effects.js?855e:1748:1)
at Icon.Object.defineProperty.set (properties-changed.js?7749:170:1)
at Icon.ready (vaadin-icon.js?30dc:146:1)
at Icon.Kw.s.ready (FlowClient.js?2d7e:1006:26370)
at Icon._enableProperties (properties-changed.js?7749:362:1)
at Icon.connectedCallback (properties-mixin.js?30f6:222:1)
at Icon.connectedCallback (element-mixin.js?62ae:680:1)
at Icon.connectedCallback (dir-mixin.js?8432:67:1)
at Icon.connectedCallback (vaadin-icon.js?30dc:167:1)
at GridTemplatizer.render (template-renderer-templatizer.js?feaf:51:1)
at renderer (template-renderer.js?ee7e:14:1)
at renderer (eval at kt (FlowClient.js?2d7e:1:1), <anonymous>:3:482)
at GridColumn.renderer (eval at kt (FlowClient.js?2d7e:1:1), <anonymous>:3:482)
at eval (vaadin-grid.js?75ed:949:1)
at Array.forEach (<anonymous>)
at Grid._updateItem (vaadin-grid.js?75ed:946:1)
at Grid.eval (gridConnector.js?4c4f:434:13)
at Grid.eval [as _updateItem] (FlowBootstrap.js?f80c:64:1)
at Grid._getItem (vaadin-grid-data-provider-mixin.js?c432:254:1)
at Grid._updateScrollerItem (vaadin-grid.js?75ed:857:1)
at IronListAdapter.__updateElement (virtualizer-iron-list-adapter.js?c65d:140:1)
at IronListAdapter.eval (virtualizer-iron-list-adapter.js?c65d:274:1)
at IronListAdapter._iterateItems (iron-list-core.js?aecc:630:1)
at IronListAdapter._assignModels (virtualizer-iron-list-adapter.js?c65d:269:1)
at IronListAdapter._update (iron-list-core.js?aecc:442:1)
at IronListAdapter._render (iron-list-core.js?aecc:541:1)
at IronListAdapter.eval (iron-list-core.js?aecc:887:1)
at Debouncer.flush (debounce.js?1087:76:1)
at eval (debounce.js?1087:159:1)
at Set.forEach (<anonymous>)
at flushDebouncers (debounce.js?1087:157:1)
at flush (debounce.js?1087:172:1)
at IronListAdapter.set size [as size] (virtualizer-iron-list-adapter.js?c65d:208:10)
at Virtualizer.set size [as size] (virtualizer.js?2706:31:1)
at Grid._effectiveSizeChanged (vaadin-grid.js?75ed:517:1)
at Object.runMethodEffect [as fn] (property-effects.js?855e:1038:1)
at runEffects (property-effects.js?855e:140:1)
at Grid._propertiesChanged (property-effects.js?855e:1922:1)
at Grid.Kw.s._propertiesChanged (FlowClient.js?2d7e:1006:26298)
at Grid._flushProperties (properties-changed.js?7749:384:1)
at Grid._invalidateProperties (property-effects.js?855e:1748:1)
at Grid.Object.defineProperty.set (properties-changed.js?7749:170:1)
at Grid._updateColumnTree (vaadin-grid-dynamic-columns-mixin.js?c83d:83:1)
at Grid.eval (vaadin-grid-dynamic-columns-mixin.js?c83d:98:1)
at FlattenedNodesObserver.flush (flattened-nodes-observer.js?76fe:281:1)
at eval (flattened-nodes-observer.js?76fe:202:16)
at MutationObserver.microtaskFlush (async.js?339b:41:1)
As recommended in the Vaadin update notes, I deleted the node_modules folder before, which was also generated again. I also deleted folder .vaadin and rebuilt everything with mvn clean install
Anyone have an idea how I can fix the problem?
- Openjdk 11.0.13
- Vaadin 23.0.0
- Spring boot 2.6.4
- OS Windows 10