IntelliJ Designer opens with blank tab with Vaadin 14/polymer3 design

[mpilone]

Steps to reproduce

In a multi-module Maven project, with the structure "project-root/grouping-dir/vaadin-module", double clicking on a design results in an editor tab opening but no content in the tab. No preview, no source, no property editor, etc. Just a blank/empty editor tab.

When I try to create a new design, it generates a polymer2 html file and not a polymer3 JS module file. The editor does open properly for the polymer2 file in this case. In both cases I'm using the new "open in Chrome" lab's feature.

I originally posted this in the forum, https://vaadin.com/forum/thread/17829285/vaadin-14-support, but after discussing with Olli it sounded like a bug that should be posted here.

It sounds like the issue might be related to the multi-module structure where the node_modules directory is in "project-root/grouping-dir/vaadin-module/node_modules" and the designer is not properly detecting/locating it.

Actual behavior

A blank tab is opened with no editor content. No exceptions are visible in the IntelliJ logs. In fact, even with com.vaadin:trace configured in IntelliJ I don't see any output in the logs related to opening the file.

Expected behavior

The Designer editor opens with the source of the JS module file and a Chrome browser opens with the visual editor (I'm using the new "open in Chrome" feature but the behavior is the same with the feature enabled or disabled).

IDE, Designer and OS version

IntelliJ 2019.2.2 Vaadin Designer 4.3.5 MacOS 10.14.6

[anssit]

This is indeed an issue in Designer. It is not able to cope with the project structure.

To work around the problem: 1) create an empty ./frontend folder at project root 2) make sure the UI module's node_modules folder is populated by e.g. running your project 3) copy the UI module's node-modules folder to project root so that the project has ./node_modules 3) reopen the project

Designer will now identify the project as Polymer 3 project. You can create your designs in your UI module's frontend folder, the ./frontend folder created in step 1 above is only needed for project type detection. The ./node_modules folder at project root is used for serving the dependencies needed to render your design, and populate the palette.

Notice that, now that there's two node-modules folders, Designer sometimes picks the wrong folder when you add components to the design. You should keep an eye on the added imports and manually fix the paths in the source mode. A wrong import path could look like this import '../../node_modules/@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';. To fix it, remove the relative path before @vaadin: import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';

[mpilone]

anssit, thanks for the reply. I tried the workaround but I'm getting the same result. The JS module opens in a blank/empty tab. I did find that the behavior of the New Vaadin 10+ design dialog has changed slightly that it now displays the error "No Polymer found in this project." while before it would simply create a polymer2/html design file.

I actually have multiple Vaadin modules in this one project:

• cd-project
  • portal
  • dashboard (war)
  • portalui2 (war)
  • crab
  • crabwall2 (war)
  • shared
  • vaadin (shared library of components)

For this workaround I created the frontend directory in cd-project and copied the dashboard/node_modules directory to cd-project. I also tried just symlinking them but that also didn't work.

When starting IntelliJ, the only Vaadin related logging I see is:

2019-09-10 08:26:34,637 [   4808]   INFO -           com.vaadin.designer2 - BrowserCore initialized. 
2019-09-10 08:26:43,682 [  13853]   INFO - Json.PackageJsonUpdateNotifier - processPackageJsonFiles [file:///Users/mpilone/.../cd-project/shared/vaadin/package.json, file:///Users/mpilone/.../cd-project/portal/dashboard/package.json, file:///Users/mpilone/.../cd-project/portal/portalui2/package.json, file:///Users/mpilone/.../cd-project/crabui/crabwall2/package.json] 
2019-09-10 08:30:22,355 [ 232526]   INFO - Json.PackageJsonUpdateNotifier - processPackageJsonFiles [file:///Users/mpilone/.../cd-project/shared/vaadin/package.json, file:///Users/mpilone/.../cd-project/portal/dashboard/package.json, file:///Users/mpilone/.../cd-project/portal/portalui2/package.json, file:///Users/mpilone/.../cd-project/crabui/crabwall2/package.json] 

I also have some Vaadin 8 modules in this same project (the original crabwall and portalui that we're porting). I'm not sure if that would cause an issue but it seemed to be OK when we had a mix of Vaadin 8 and Vaadin 13 in the same multi-module project.

[anssit]

@mpilone Thanks for the additional information.

I was able to reproduce the issue like this:

• create an empty Maven project in IDEA
• add a V14 module from Maven archetype com.vaadin:vaadin-archetype-application:LATEST
• do the workaround I described above
• verify that you can create V14 designs
• add a V8 module from Maven archetype com.vaadin:vaadin-archetype-application:8.7.2
• create a V10+ design in the V14 module

The result is I cannot create a design, but get the same Polymer 2 / bower related error message in the dialog.

If I remove or unload the V8 module, I can again create designs.

[mpilone]

Thanks for creating the test case to reproduce the issue. I would think this might be a common setup with multi-module Maven projects and user's migrating from v8 to v10+. I'll follow this ticket for future status.

[mpittkin]

This one is pretty important for us, as we're getting started with a new project where we want to use Vaadin 14, and we need a multi-module maven project setup. The workaround is awkward, but we can do that for now. If that's what we want fixed, then should we flag this issue for priority?

[markusherr]

This is indeed an issue in Designer. It is not able to cope with the project structure.

To work around the problem:

1. create an empty ./frontend folder at project root
2. make sure the UI module's node_modules folder is populated by e.g. running your project
3. copy the UI module's node-modules folder to project root so that the project has ./node_modules
4. reopen the project

Designer will now identify the project as Polymer 3 project. You can create your designs in your UI module's frontend folder, the ./frontend folder created in step 1 above is only needed for project type detection. The ./node_modules folder at project root is used for serving the dependencies needed to render your design, and populate the palette.

Notice that, now that there's two node-modules folders, Designer sometimes picks the wrong folder when you add components to the design. You should keep an eye on the added imports and manually fix the paths in the source mode. A wrong import path could look like this import '../../node_modules/@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';. To fix it, remove the relative path before @vaadin: import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';

Confirmed, that this workaround works for me. But its really ugly and needs to be fixed. I think most non trivial projects will have a multi module setup.

[szolo]

Hello @mpilone, @mpittkin, @markusherr. We've just released Designer 4.3.8 which supports multiple modules project in IntelliJ IDEA. Feel free to update.

[mpittkin]

Thanks @szolo , I'll give this a try and let you know if I find any issues.