Skip to content

bachlge/ui5-local

Repository files navigation

Vaadin 15 Demo Project to show an incompatibility Vaadin Pro and UI5 WebComponents

  1. create a new project by downloading a starter (Vaadin 15, Spring Boot)
  2. npm install @ui5/webcomponents
  3. create a java wrapper for a UI5-component:
@Tag("ui5-switch")
@JsModule("@ui5/webcomponents/dist/Switch.js")
public class Ui5Switch extends Component {

	public Ui5Switch() {
		this.getElement().setProperty("textOn", "Yes");
		this.getElement().setProperty("textOff", "No");
	}

}
  1. create a view using the component
import com.gork.ui5.test.elements.Ui5Switch;

@Route
public class MainView extends VerticalLayout {

    public MainView() {

    	Ui5Switch ui5switch = new Ui5Switch();

        add(ui5switch);
    }

}
  1. run

the application will compile without any errors in the browser, however, an empty screen will be presented

  1. Console shows one error
Utilities.js?ac76:2635 Uncaught (in promise) TypeError: Cannot set property 'highcharts' of undefined
    at eval (Utilities.js?ac76:2635)
    at Module.../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/parts/Utilities.js (vaadin-0-3e06bc81abb8f68f7130.cache.js:6008)
    at __webpack_require__ (vaadin-bundle-be22a6ca42c2827921a5.cache.js:64)
    at eval (SvgRenderer.js?51ad:1)
    at Module.../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/parts/SvgRenderer.js (vaadin-0-3e06bc81abb8f68f7130.cache.js:5948)
    at __webpack_require__ (vaadin-bundle-be22a6ca42c2827921a5.cache.js:64)
    at eval (highcharts.src.js?929e:1)
    at Module.../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/masters/highcharts.src.js (vaadin-0-3e06bc81abb8f68f7130.cache.js:4880)
    at __webpack_require__ (vaadin-bundle-be22a6ca42c2827921a5.cache.js:64)
    at eval (highstock.src.js?93ac:1)
eval @ Utilities.js?ac76:2635
../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/parts/Utilities.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:6008
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ SvgRenderer.js?51ad:1
../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/parts/SvgRenderer.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:5948
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ highcharts.src.js?929e:1
../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/masters/highcharts.src.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:4880
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ highstock.src.js?93ac:1
../node_modules/.pnpm/registry.npmjs.org/highcharts/6.1.4/node_modules/highcharts/js/es-modules/masters/highstock.src.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:4892
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ vaadin-chart.js?281b:1
../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-charts/6.2.4/node_modules/@vaadin/vaadin-charts/src/vaadin-chart.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:1619
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ vaadin-chart.js?a98e:1
../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-charts/6.2.4/node_modules/@vaadin/vaadin-charts/vaadin-chart.js @ vaadin-0-3e06bc81abb8f68f7130.cache.js:1655
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
eval @ generated-flow-imports.js?b518:1
../target/frontend/generated-flow-imports.js @ vaadin-1-e61d3eb5ec3d7ab42ccc.cache.js:184
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
Promise.catch (async)
render @ vaadin-router.js?700d:1812
__onNavigationEvent @ vaadin-router.js?700d:2231
setRoutes @ vaadin-router.js?700d:1714
eval @ index.ts?5b66:14
./index.ts @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:236
__webpack_require__ @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:64
(anonymous) @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:199
(anonymous) @ vaadin-bundle-be22a6ca42c2827921a5.cache.js:202
  1. workaround: app works as expected if the com.vaadin artifactId is changed to vaadin-core
        <dependency>
            <groupId>com.vaadin</groupId>
            <!-- Replace artifactId with vaadin-core to use only free components -->
            <artifactId>vaadin</artifactId>
        </dependency>

About

Demo to show a defect and how to workaround

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published