Cant start Vaadin UI Designer after installing plugin

Flow
1

Greetings,

I follow this installing designer in this tutorial.

I installed it and stuck in this step which is When you open Vaadin Designer for the first time.

I downloaded basic project from this page as suggested and open with intellij + installed plugin.

How can i open Vaadin Designer for the first time? Which button i should click or smth? I never get my prompt page to verify or enter my subscruption.I dont know how to start my UIDesigner.

I have tried to uninstall designer plugin and delete ~/.vaadin directory but still dont now how to start UI Designer.

Any help or suggestion are welcome.

M1, JDK 22, Intellij 2024.1, VaadinDesigner 4.6.25

slawalata
freezing in montreal

2

I dont read it carefully.

I get Intellij 2024.1 but plugin says compatible until 20.23.36 :cry:

I realiazed after i see lot of error in idea.log

2024-04-06 19:30:53,692 [ 219845] SEVERE - #c.i.o.o.e.ConfigurableWrapper - IntelliJ IDEA 2024.1  Build #IU-241.14494.240
2024-04-06 19:30:53,692 [ 219845] SEVERE - #c.i.o.o.e.ConfigurableWrapper - JDK: 17.0.10; VM: OpenJDK 64-Bit Server VM; Vendor: JetBrains s.r.o.
2024-04-06 19:30:53,692 [ 219845] SEVERE - #c.i.o.o.e.ConfigurableWrapper - OS: Mac OS X
2024-04-06 19:30:53,692 [ 219845] SEVERE - #c.i.o.o.e.ConfigurableWrapper - Plugin to blame: Vaadin Designer version: 4.6.25
2024-04-06 19:30:53,693 [ 219846] SEVERE - #c.i.o.o.e.ConfigurableWrapper - No display name specified in plugin descriptor XML file for configurable com.vaadin.designer2.intellij.settings.ProjectSettingsConfigurable;
specify it using 'displayName' or 'key' attribute to avoid necessity to load the configurable class when Settings dialog is opened [Plugin: com.vaadin.designer2.intellij]
com.intellij.diagnostic.PluginException: No display name specified in plugin descriptor XML file for configurable com.vaadin.designer2.intellij.settings.ProjectSettingsConfigurable;
specify it using 'displayName' or 'key' attribute to avoid necessity to load the configurable class when Settings dialog is opened [Plugin: com.vaadin.designer2.intellij]
	at com.intellij.openapi.options.ex.ConfigurableWrapper.getDisplayName(ConfigurableWrapper.java:156)
	at com.intellij.openapi.options.ex.Weighted.lambda$static$0(Weighted.java:26)
	at java.base/java.util.TimSort.binarySort(TimSort.java:296)
	at java.base/java.util.TimSort.sort(TimSort.java:221)
	at java.base/java.util.Arrays.sort(Arrays.java:1307)
	at java.base/java.util.ArrayList.sort(ArrayList.java:1721)

I create a new issue in git. Just to make them aware about it.

I try to downgrade and reinstall once again designerUI.

it is getting warmer here in Montreal…

3

So I downgraded my intellij and installed the plugin.

I need to add this

sudo ln -s /opt/homebrew/opt/node@20/bin/node /usr/local/bin/

then vaadin plugin can find my node installed by homebrew.

UI designer is opened but in browser not as a window in intellij …

Still try to find it out how to make it run as intelliJ plugin.

any suggestion is still welcome.

4

Hello, I have released a new Vaadin Designer 4.6.26. While JetBrains is approving it, feel free to use EAP version https://plugins.jetbrains.com/plugin/9519-vaadin-designer/edit/versions/eap.

Regarding opening in the browser, have you tried to disable appropriate setting? It could be found at File->Settings->Vaadin Designer->Browser settings->Enable Chrome editor.

5

Hi @stepan.zolotarev thank you for your respond.

I prefer to stick with designerUI plugin version 4.6.25 assuming people have used it with high change to success :slight_smile:

I always get message Please wait loading view and it never opens the UI editor.

I have jetty server run in background, stated in idea.log

2024-04-18 16:17:24,140 [1300813] INFO - org.eclipse.jetty.server.Server - Started @1301074ms
2024-04-18 16:17:24,140 [1300813] INFO - com.vaadin.designer2.server.EditorApplicationServer - Remote preview available on http://10.250.243.174:51192. Designer running on http://localhost:51192.
2024-04-18 16:17:24,160 [1300833] INFO - com.vaadin.designer2.services.flow.NodeProcessBuilder - Starting node process: /usr/local/bin/node ./dist/server.js --rootPath=/Users/slawalata/Projects/java/vaadin/designer-tutorial-ex01/node_modules --port=55647 --hostPid=17403

I try to click both http://localhost:51192 and http://10.250.243.174:51192 but it return 404.

If i use browser mode, it will show a black white sheet eventhough i have put several component on it like screen shot

image
image1782×1780 233 KB

I find this error message in browser:

Uncaught SyntaxError: The requested module ‘http://localhost:55647/files/transformed/lit-element/index.js’ does not provide an export named ‘customElement’ (at 0daf?mode=edit&editor:1:33)

I am not successfully running designerui in my machine until now.

Mac M1, Sonoma 14.4, openjdk 21

many thanks.

6

After struggling with this issue, I found a workaround that worked for me. Open the file-view.ts file located in the /frontend/generated/jar-resources/src/views/ folder. Surprisingly, this file opens with the components loaded. After doing this, I was also able to load the original source file in the designer (both chrome and intellij)