Problems with running Vaadin 7 application under Vaadin 14 MPR mode

Hello guys,

as far as I understood it is possible to run Vaadin 7 apps using Vaadin MPR under Vaadin 14.
I followed the instruction under https://vaadin.com/docs/v10/mpr/introduction/step-1-maven-v7.html including all following steps.

I simply migrated a “Hello world Vaadin 7 MainUI” to be a Div component running on the “” Route.

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import com.vaadin.mpr.LegacyWrapper;
import com.vaadin.mpr.core.HasLegacyComponents;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

@Route("")
public class MainUI extends Div implements HasLegacyComponents {

	public MainUI() {
		System.out.println("constructor MainUI");

		VerticalLayout verticalLayout = new VerticalLayout();
		Label label = new Label("Testlabel");

		TextField textField = new TextField("eingabe");

		verticalLayout.addComponent(label);

		verticalLayout.setSizeFull();

		LegacyWrapper legacyWrapper = new LegacyWrapper(verticalLayout);
		legacyWrapper.setSizeFull();

		com.vaadin.flow.component.html.Label newLabel1 = new com.vaadin.flow.component.html.Label("newLabel 1");
		com.vaadin.flow.component.html.Label newLabel2 = new com.vaadin.flow.component.html.Label("newLabel 2");
		com.vaadin.flow.component.html.Label newLabel3 = new com.vaadin.flow.component.html.Label("newLabel 3");


		add(newLabel1);
		add(label);
		add(legacyWrapper);
		add(new LegacyWrapper(textField));
		add(newLabel2);
		add(newLabel3);
	}
}

Here the full content of my pom.xml 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>
	<parent>
		<groupId>sampleGroup</groupId>
		<artifactId>sampleArtifcat</artifactId>
		<version>${revision}</version>
		<relativePath>../sampleParent</relativePath>
	</parent>
	<groupId>helloWorldGroup</groupId>
	<artifactId>helloWorldArtifact</artifactId>
	<name>helloWorldApp</name>
	<packaging>war</packaging>


	<properties>
		<vaadin.version>7.7.17</vaadin.version>
		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
		<flow.version>2.0.7</flow.version>
		<slf4j.version>1.7.25</slf4j.version>
		<jetty.plugin.version>9.4.19.v20190610</jetty.plugin.version>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<widgetsets>src/main/webapp/VAADIN/widgetsets</widgetsets>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>

	<dependencyManagement>
		<dependencies>
			<dependency>
				<groupId>com.vaadin</groupId>
				<artifactId>vaadin-bom</artifactId>
				<type>pom</type>
				<scope>import</scope>
				<version>14.0.0</version>
			</dependency>
		</dependencies>
	</dependencyManagement>

	<dependencies>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-core</artifactId>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>mpr-v7</artifactId>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-server</artifactId>
			<version>${vaadin.version}</version>
			<exclusions>
				<exclusion>
					<groupId>org.jsoup</groupId>
					<artifactId>jsoup</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.google.gwt</groupId>
					<artifactId>gwt-elemental</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-themes</artifactId>
			<version>${vaadin.version}</version>
		</dependency>
		<dependency>
			<groupId>org.unitils</groupId>
			<artifactId>unitils-core</artifactId>
		</dependency>
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-entitymanager</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-envers</artifactId>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-simple</artifactId>
			<version>1.7.25</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>

			<plugin>
				<groupId>com.vaadin</groupId>
				<artifactId>vaadin-maven-plugin</artifactId>
				<version>${vaadin.plugin.version}</version>
				<executions>
					<execution>
						<goals>
							<goal>resources</goal>
							<goal>update-widgetset</goal>
							<goal>compile</goal>
						</goals>
					</execution>
				</executions>
			</plugin>
			<plugin>
				<groupId>com.vaadin</groupId>
				<artifactId>flow-maven-plugin</artifactId>
				<version>${flow.version}</version>
				<executions>
					<execution>
						<goals>
							<goal>prepare-frontend</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

			<!-- The Jetty plugin allows us to easily test the development build by
				running jetty:run on the command line. -->
			<plugin>
				<groupId>org.eclipse.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>${jetty.plugin.version}</version>
				<configuration>
					<scanIntervalSeconds>2</scanIntervalSeconds>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

So far running mvn jetty:run

  • starts the application under http://localhost:8080/
  • I can see the Main View.
  • All “Vaadin 14” components are correctly displayed.
  • Somehow all Vaadin 7 components put in a LegacyWrapper are not displayed correctly.

This is how the rendered HTML snippet looks like:

<div>
 <label>newLabel 1</label>
 <div class="v-app valo" style="display: inline-block; width: inherit; height: inherit;"></div>
 <div class="v-app valo" style="display: inline-block; width: 100%; height: 100%;"></div>
 <div class="v-app valo" style="display: inline-block; width: inherit; height: inherit;"></div>
 <label>newLabel 2</label>
 <label>newLabel 3</label>
</div>

In the browser I receive the following messages:

generated-flow-imports.js?babel-target=es6:1 Uncaught Error: Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '...\target\frontend\generated-flow-imports.js'
    at eval (generated-flow-imports.js?babel-target=es6:1)
    at Object.../target/frontend/generated-flow-imports.js?babel-target=es6 (vaadin-bundle-3d48d5bc0f1918504bf0.cache.js:96)
    at __webpack_require__ (vaadin-bundle-3d48d5bc0f1918504bf0.cache.js:20)
    at vaadin-bundle-3d48d5bc0f1918504bf0.cache.js:84
    at vaadin-bundle-3d48d5bc0f1918504bf0.cache.js:87
AppWidgetset-0.js:6602 Fri Jul 03 16:04:50 GMT+200 2020 com.vaadin.client.ApplicationConnection
SEVERE: Warning: your widget set seems to be built with a different version than the one used on server. Unexpected behavior may occur.
AppWidgetset-0.js:6602 Fri Jul 03 16:04:50 GMT+200 2020 com.vaadin.client.communication.MessageHandler
SEVERE: Hierachy claims UnknownComponentConnector (6) has component children even though it isn't a HasComponentsConnector

How can I run the Vaadin 7 components successfully in Vaadin 14? Is there maybe a step in the description missing?

This is how it looks like in the browser
18343147.png