AceEditor not showing in the UI
vaithu opened this issue · 15 comments
Describe the bug
AceEditor not showing up in the UI
To Reproduce
Steps to reproduce the behavior:
- Download vaadin starter application with v23.1.1
- Add AceEditor to the a page/view like
AceEditor aceEditor = new AceEditor();
aceEditor.setSizeFull();
add(aceEditor); //Add it to a layout
Run the project and open the browser
Expected behavior
Show AceEditior in the view
Screenshots
Desktop (please complete the following information):
- OS: Windows
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
Good Morning @vaithu,
this is a Vaadin Issue, but we'll sort it out easily. Could you please tell me the version you are using for the ace editor ?
I'm using this version.
<dependency>
<groupId>de.f0rce</groupId>
<artifactId>ace</artifactId>
<version>3.1.1</version>
</dependency>
Could you please try switching to Version 3.1.2
and follow these steps:
- delete node_modules/
- delete package.json
- delete package-lock.json
- delete target/ (can also be done by
mvn clean - delete frontend/generated/
- delete webpack.config.js
- delete webpack.generated.js
After that please just do a mvn clean install and try to run your dev enviroment mvn spring-boot:run
Hopefully that resolves your issue :)
I tried above steps but no luck. Here is my pom file
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<!-- Project from https://start.vaadin.com/project/1f9aabee-2245-4012-b584-4621350fadfb -->
<groupId>com.example.application</groupId>
<artifactId>Testlogging</artifactId>
<name>TEST Logging</name>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>
<properties>
<java.version>11</java.version>
<vaadin.version>23.1.1</vaadin.version>
<selenium.version>4.1.2</selenium.version>
<holon.version>5.5.0</holon.version>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.0</version>
</parent>
<repositories>
<!-- The order of definitions matters. Explicitly defining central here to make sure it has the highest priority. -->
<!-- Main Maven repository -->
<repository>
<id>central</id>
<url>https://repo.maven.apache.org/maven2</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>vaadin-prereleases</id>
<url>
https://maven.vaadin.com/vaadin-prereleases/
</url>
</repository>
<!-- Repository used by many Vaadin add-ons -->
<repository>
<id>Vaadin Directory</id>
<url>https://maven.vaadin.com/vaadin-addons</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<!-- The order of definitions matters. Explicitly defining central here to make sure it has the highest priority. -->
<pluginRepository>
<id>central</id>
<url>https://repo.maven.apache.org/maven2</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>
https://maven.vaadin.com/vaadin-prereleases/
</url>
</pluginRepository>
</pluginRepositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<!-- Replace artifactId with vaadin-core to use only free components -->
<artifactId>vaadin</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-testbench</artifactId>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.h2database/h2 -->
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>javax.persistence-api</artifactId>
<version>2.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.microsoft.sqlserver/mssql-jdbc -->
<dependency>
<groupId>com.microsoft.sqlserver</groupId>
<artifactId>mssql-jdbc</artifactId>
<version>10.2.0.jre8</version>
</dependency>
<dependency>
<groupId>de.f0rce</groupId>
<artifactId>ace</artifactId>
<version>3.1.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.github.javadev/underscore -->
<dependency>
<groupId>com.github.javadev</groupId>
<artifactId>underscore</artifactId>
<version>1.77</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.ibm.mq/com.ibm.mq.allclient -->
<dependency>
<groupId>com.ibm.mq</groupId>
<artifactId>com.ibm.mq.allclient</artifactId>
<version>9.2.5.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.holon-platform.vaadin/holon-vaadin-flow -->
<dependency>
<groupId>com.holon-platform.vaadin</groupId>
<artifactId>holon-vaadin-flow</artifactId>
<version>${holon.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.holon-platform.core/holon-starter -->
<dependency>
<groupId>com.holon-platform.core</groupId>
<artifactId>holon-starter</artifactId>
<version>${holon.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.holon-platform.vaadin/holon-vaadin-flow-navigator -->
<dependency>
<groupId>com.holon-platform.vaadin</groupId>
<artifactId>holon-vaadin-flow-navigator</artifactId>
<version>${holon.version}</version>
</dependency>
<!-- Holon: JPA (Hibernate) starter -->
<dependency>
<groupId>com.holon-platform.jpa</groupId>
<artifactId>holon-starter-jpa-hibernate</artifactId>
<version>${holon.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-jpa -->
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-jpa</artifactId>
<version>2.5.9</version>
</dependency>
<dependency>
<groupId>de.f0rce</groupId>
<artifactId>ace</artifactId>
<version>3.1.2</version>
</dependency>
<dependency>
<groupId>org.vaadin.addons.parttio</groupId>
<artifactId>breeze-theme</artifactId>
<version>1.0.1</version>
</dependency>
<!-- Include JUnit 4 support for TestBench and others -->
<dependency>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.hamcrest</groupId>
<artifactId>hamcrest-core</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.1.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<defaultGoal>spring-boot:run</defaultGoal>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<!-- Clean build and startup time for Vaadin apps sometimes may exceed
the default Spring Boot's 30sec timeout. -->
<configuration>
<wait>500</wait>
<maxAttempts>240</maxAttempts>
</configuration>
</plugin>
<!--
Take care of synchronizing java dependencies and imports in
package.json and main.js files.
It also creates webpack.config.js if not exists yet.
-->
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>prepare-frontend</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<!-- Production mode is activated using -Pproduction -->
<id>production</id>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>build-frontend</goal>
</goals>
<phase>compile</phase>
</execution>
</executions>
<configuration>
<productionMode>true</productionMode>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>it</id>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<id>start-spring-boot</id>
<phase>pre-integration-test</phase>
<goals>
<goal>start</goal>
</goals>
</execution>
<execution>
<id>stop-spring-boot</id>
<phase>post-integration-test</phase>
<goals>
<goal>stop</goal>
</goals>
</execution>
</executions>
</plugin>
<!-- Runs the integration tests (*IT) after the server is started -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-failsafe-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>integration-test</goal>
<goal>verify</goal>
</goals>
</execution>
</executions>
<configuration>
<trimStackTrace>false</trimStackTrace>
<enableAssertions>true</enableAssertions>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>
This is a plain vaadin starter but I added some additional dependencies for my need into the POM xml. Do you see anything unusual which is preventing ace editor ?
This is actually super odd... could you go into the vaadin starter folder and open a terminal and execute npm i @f0rce/lit-ace --save maybe npm is not resolving the dependencies....
or is the browser console throwing any errors ?
I see the dependency here
Also, no errors in the Browser.
not the maven dependency. I am trying to install the NPM-Package (which is the frontend) by hand...
add annotations:
@NpmPackage(value = "@f0rce/lit-ace", version = "1.9.0");
@JsModule("@f0rce/lit-ace/lit-ace.js");
Hello everyone,
sorry for the super late reply again, but I was busy with my finals exams (which I passed) and getting my life under control.
I was trying to debug this issue and it has nothing to do with Vaadin and or Ace Editor itself. It is 100 % a IDE Issue. In my case, I was able to replicate the exact behaviour you guys were having if I imported the starter project from https://start.vaadin.com into Eclipse (couldn't test it in JetBrains, but I guess its the same behaviour). As soon as the project is imported, the Java Build Path is completely incorrect.
To fix the issue, you would have to click the two checkboxes (which I clicked in the screenshot below) JRE System Library ... and most importantly Maven Dependencies.
After that I just restarted my application (which was running under spring-boot) and it was visible. Don't really know if Vaadin provides the wrong "files" that give the IDE some extra information on the correct importing of the project, or something else. maybe if I have some time, I could dig a bit deeper and try to find the exact cause of the problem - probably with help of Vaadin support
Could you please check if that fixes the issue ?
Thanks in advance,
David
Probably exists longer than I thought - as someone was having the exact same issue in #31 (sadly I got no answer, so I couldn't investigate there)
Sorry, my bad
I didn't add package groupId to the vaadin.whitelisted-packagesproperty
Everything is working fine
closed due to inactivity. If this issue occurs again, just reopen this issue or open a new one :)
Have the same issue with 3.4.2 and Vaadin 24.3.5. If I try ace.setSizeFull(); or a percentage ace.setHeight("90%"); the editor will be reduced to a thin line. Only fixed values will work ace.setHeight("500px");.
This is my pom: https://github.com/mhus/kt2l/blob/first_research/pom.xml
Any idea?