Closed mpilone closed 4 years ago
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';
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:
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.
@mpilone Thanks for the additional information.
I was able to reproduce the issue like this:
com.vaadin:vaadin-archetype-application:LATEST
com.vaadin:vaadin-archetype-application:8.7.2
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.
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.
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?
This is indeed an issue in Designer. It is not able to cope with the project structure.
To work around the problem:
- create an empty
./frontend
folder at project root- make sure the UI module's
node_modules
folder is populated by e.g. running your project- copy the UI module's
node-modules
folder to project root so that the project has./node_modules
- 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 thisimport '../../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.
Hello @mpilone, @mpittkin, @markusherr. We've just released Designer 4.3.8 which supports multiple modules project in IntelliJ IDEA. Feel free to update.
Thanks @szolo , I'll give this a try and let you know if I find any issues.
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