Migrate Vaadin 13 to 14 Java EE + CDI - node_modules error

Flow
1

Hi All,
Please help me with this issue.

I try to migrate project from 13 to 14 version. Project on Java EE + CDI and build with WildFly .
When i try to run app I have this problems -

 Failed to find the following imports in the `node_modules` tree:
      - @vaadin/flow-frontend/datepickerConnector.js
      - @vaadin/flow-frontend/contextMenuConnector-es6.js
      - @vaadin/flow-frontend/comboBoxConnector.js
      - @vaadin/flow-frontend/gridConnector.js
      - @vaadin/flow-frontend/contextMenuConnector.js
      - @vaadin/flow-frontend/flow-component-renderer.js
      - @vaadin/flow-frontend/gridConnector-es6.js
      - @vaadin/flow-frontend/comboBoxConnector-es6.js
      - @vaadin/flow-frontend/vaadin-grid-flow-selection-column.js
  If the build fails, check that npm packages are installed.

12:41:19,208 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,208 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/comboBoxConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,209 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 23:0-56
12:41:19,209 ERROR [dev-webpack]
(webpack) 
12:41:19,209 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,209 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/comboBoxConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,209 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 23:0-56
12:41:19,209 ERROR [dev-webpack]
(webpack) 
12:41:19,209 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,210 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/comboBoxConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,210 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 51:0-52
12:41:19,210 ERROR [dev-webpack]
(webpack) 
12:41:19,210 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,210 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/comboBoxConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,210 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 51:0-52
12:41:19,210 ERROR [dev-webpack]
(webpack) 
12:41:19,210 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,211 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,211 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 44:0-59
12:41:19,211 ERROR [dev-webpack]
(webpack) 
12:41:19,211 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,211 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,211 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 44:0-59
12:41:19,211 ERROR [dev-webpack]
(webpack) 
12:41:19,211 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,212 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,212 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 50:0-55
12:41:19,212 ERROR [dev-webpack]
(webpack) 
12:41:19,212 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,212 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,212 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 50:0-55
12:41:19,212 ERROR [dev-webpack]
(webpack) 
12:41:19,213 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,213 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/datepickerConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,213 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 48:0-54
12:41:19,213 ERROR [dev-webpack]
(webpack) 
12:41:19,213 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,213 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/datepickerConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,214 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 48:0-54
12:41:19,214 ERROR [dev-webpack]
(webpack) 
12:41:19,214 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,215 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/flow-component-renderer.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,215 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 31:0-58
12:41:19,215 ERROR [dev-webpack]
(webpack) 
12:41:19,215 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,215 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/flow-component-renderer.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,215 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 31:0-58
12:41:19,216 ERROR [dev-webpack]
(webpack) 
12:41:19,216 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,216 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,216 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 37:0-52
12:41:19,216 ERROR [dev-webpack]
(webpack) 
12:41:19,216 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,216 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector-es6.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,217 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 37:0-52
12:41:19,217 ERROR [dev-webpack]
(webpack) 
12:41:19,217 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,217 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,217 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 49:0-48
12:41:19,217 ERROR [dev-webpack]
(webpack) 
12:41:19,217 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,217 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,217 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 49:0-48
12:41:19,218 ERROR [dev-webpack]
(webpack) 
12:41:19,218 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,218 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/vaadin-grid-flow-selection-column.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,218 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 28:0-68
12:41:19,218 ERROR [dev-webpack]
(webpack) 
12:41:19,218 ERROR [dev-webpack]
(webpack) ERROR in ../target/frontend/generated-flow-imports.js
12:41:19,218 ERROR [dev-webpack]
(webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/vaadin-grid-flow-selection-column.js' in 'D:\GitLab\MDM Vaasin 14 migration\mdm\mdm-interface\target\frontend'
12:41:19,218 ERROR [dev-webpack]
(webpack)  @ ../target/frontend/generated-flow-imports.js 28:0-68
12:41:19,219 ERROR [dev-webpack]
(webpack) i ?wdm?: Failed to compile.
12:41:19,219 ERROR [dev-webpack]
(webpack) 
------------------ Frontend compilation failed. -----------------

How to configure project to solve this issue ?

2

same problem

3

me too

4

Hi All,

I found solution.

Need to add - <goal>build-frontend</goal>  to vaadin maven plugin -
<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>${vaadin.version}</version>
    <executions>
      <execution>
        <goals>
          <goal>prepare-frontend</goal>
          <goal>build-frontend</goal> <---------------  
        </goals>
      </execution>
    </executions>
  </plugin>

This goal uploading missing vaadin packages to node_modules!

This info place in this migration tutorial - https://vaadin.com/tutorials/migrate-from-bower-to-npm-for-vaadin-14+

5

Hi. The <goal>build-frontend</goal> should be only used to make a production build, and thus be in a production profile, as it compiles all the used frontend resources. Or you can use it when you want to (for some reason) package the application as a war/jar and deploy it to a external server without being able to develop it at the same time.

The tutorial actually has false information about having build-frontend there and should be fixed.

The reported issue though seems similar to https://github.com/vaadin/skeleton-starter-flow-cdi/issues/104

For reference, the official migration instructions are in https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html

6

Pekka Hyvönen:
Hi. The <goal>build-frontend</goal> should be only used to make a production build, and thus be in a production profile, as it compiles all the used frontend resources. Or you can use it when you want to (for some reason) package the application as a war/jar and deploy it to a external server without being able to develop it at the same time.

The tutorial actually has false information about having build-frontend there and should be fixed.

The reported issue though seems similar to https://github.com/vaadin/skeleton-starter-flow-cdi/issues/104

For reference, the official migration instructions are in https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html

In starter example you have:

<build>
        <plugins>
            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-frontend</goal>
                            <goal>build-frontend</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

in pom.xml outside profiles.

Not in production profile

7

In starter example you have:

I just checked all the starters and found that in the Business App Starter (doh!). We’ll fix that, it is wrong. (stupid silos)
If that is what you mean, thanks, if not, please let me know so we can fix it.

In case anyone thinks they might have the wrong setup, the Bookstore (Java only) App Starter has the correct configuration https://github.com/vaadin/bookstore-starter-flow/blob/master/bookstore-starter-flow-ui/pom.xml#L112

8

Hi All,

Thanks for response.

In our project, we use WildFly cotainer for deployment and testing.
We collect the war archive through maven with the command “mvn clean install -DskipTests” and run WildFly locally through Intellij.
With pom settings

<build>
        <finalName> ROOT </finalName>
        <plugins>
            <plugin>
                <groupId> org.apache.maven.plugins </groupId>
                <artifactId> maven-war-plugin </artifactId>
                <version> 2.5 </version>
                <configuration>
                    <failOnMissingWebXml> false </failOnMissingWebXml>
                    <archive>
                        <manifest>
                            <addDefaultImplementationEntries> true </addDefaultImplementationEntries>
                            <addDefaultSpecificationEntries> true </addDefaultSpecificationEntries>
                            <useUniqueVersions> false </useUniqueVersions>
                        </manifest>
                        <index> true </index>
                    </archive>
                </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>
                           <! - <goal> build-frontend </goal> ->
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <! - Production mode is activated using -Pproduction ->
            <id> production </id>

            <properties>
                <vaadin.productionMode> true </vaadin.productionMode>
            </properties>

            <dependencies>
                <dependency>
                    <groupId> com.vaadin </groupId>
                    <artifactId> flow-server-production-mode </artifactId>
                </dependency>
            </dependencies>

            <build>
                <plugins>
                    <plugin>
                        <groupId> com.vaadin </groupId>
                        <artifactId> vaadin-maven-plugin </artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal> build-frontend </goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <plugin>
                        <groupId> org.apache.maven.plugins </groupId>
                        <artifactId> maven-war-plugin </artifactId>
                        <version> 3.1.0 </version>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>

Npm starts loading node_modules during a debloy
and when loading produces errors -

Failed to find the following imports in the `node_modules` tree:
      - @ vaadin / flow-frontend / datepickerConnector.js
      - @ vaadin / flow-frontend / contextMenuConnector-es6.js
      - @ vaadin / flow-frontend / comboBoxConnector.js
      - @ vaadin / flow-frontend / gridConnector.js
      - @ vaadin / flow-frontend / contextMenuConnector.js
      - @ vaadin / flow-frontend / flow-component-renderer.js
      - @ vaadin / flow-frontend / gridConnector-es6.js
      - @ vaadin / flow-frontend / comboBoxConnector-es6.js
      - @ vaadin / flow-frontend / vaadin-grid-flow-selection-column.js
  If the build fails, check that npm packages are installed.

because of this, the frontend breaks.

And when I add build-frontend 

<plugin>
                <groupId> com.vaadin </groupId>
                <artifactId> vaadin-maven-plugin </artifactId>
                <version> $ {vaadin.version} </version>
                <executions>
                    <execution>
                        <goals>
                            <goal> prepare-frontend </goal>
                           <goal> build-frontend </goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

and collect the war package, it pulls up all the node _modules packages and everything gets bundled without problems.

How do we configure the pom so that we can test and deploy without errors in another way?

9

Pekka Hyvönen:

In starter example you have:

I just checked all the starters and found that in the Business App Starter (doh!). We’ll fix that, it is wrong. (stupid silos)
If that is what you mean, thanks, if not, please let me know so we can fix it.

In case anyone thinks they might have the wrong setup, the Bookstore (Java only) App Starter has the correct configuration https://github.com/vaadin/bookstore-starter-flow/blob/master/bookstore-starter-flow-ui/pom.xml#L112

Yes, that’s it! Thanks!

10

Hi All, again )

One more question. When I run the project in the debug mode, this error occurs -
Caused by: org.jboss.msc.service.ServiceNotFoundException: Service service jboss.ejb.default-resource-adapter-name-service not found

13: 48: 38,554 ERROR [org.jboss.msc.service.fail]
 (MSC service thread 1-8) MSC000001: Failed to start service jboss.deployment.unit. "ROOT.war" .PARSE: org.jboss.msc .service.StartException in service jboss.deployment.unit. "ROOT.war" .PARSE: WFLYSRV0153: Failed to process phase PARSE of deployment "ROOT.war"
	at org.jboss.as.server.deployment.DeploymentUnitPhaseService.start (DeploymentUnitPhaseService.java:154)
	at org.jboss.msc.service.ServiceControllerImpl $ StartTask.startService (ServiceControllerImpl.java:1948)
	at org.jboss.msc.service.ServiceControllerImpl $ StartTask.run (ServiceControllerImpl.java:1881)
	at java.util.concurrent.ThreadPoolExecutor.runWorker (ThreadPoolExecutor.java:1149)
	at java.util.concurrent.ThreadPoolExecutor $ Worker.run (ThreadPoolExecutor.java:624)
	at java.lang.Thread.run (Thread.java:748)
Caused by: org.jboss.msc.service.ServiceNotFoundException: Service service jboss.ejb.default-resource-adapter-name-service not found
	at org.jboss.msc.service.ServiceContainerImpl.getRequiredService (ServiceContainerImpl.java:669)
	at org.jboss.as.ejb3.deployment.processors.MessageDrivenComponentDescriptionFactory.getDefaultResourceAdapterName (MessageDrivenComponentDescriptionFactory.java:274)
	at org.jboss.as.ejb3.deployment.processors.MessageDrivenComponentDescriptionFactory.processMessageBeans (MessageDrivenComponentDescriptionFactory.java:154)
	at org.jboss.as.ejb3.deployment.processors.MessageDrivenComponentDescriptionFactory.processAnnotations (MessageDrivenComponentDescriptionFactory.java:81)
	at org.jboss.as.ejb3.deployment.processors.AnnotatedEJBComponentDescriptionDeploymentUnitProcessor.processAnnotations (AnnotatedEJBComponentDescriptionDeploymentUnitProcessor.java:57)
	at org.jboss.as.ejb3.deployment.processors.AbstractDeploymentUnitProcessor.deploy (AbstractDeploymentUnitProcessor.java:76)
	at org.jboss.as.server.deployment.DeploymentUnitPhaseService.start (DeploymentUnitPhaseService.java:147)
... 5 more

I looked for a solution on the forums, they write that you need to use standalone-full.xml, but I use it.
So the error is in something else, but I can’t understand what the problem is.
Can anyone help with this?

11

Dmitriy, in case you want to package and deploy to an external server, then you need to build the frontend bundle as there will not be a npm to download the dependencies and & webpack development server to package it for you on the fly. Thus you can package it without running the application in production mode by having the build-frontend goal there.

BUT, I since you’re using Widlfly and Maven, is there any reason why you’re not using the Wildfly Maven plugin instead https://docs.jboss.org/wildfly/plugins/maven/latest/ ? Then you would not have to run build-frontend for starting development server.

Or another alternative is to just use e.g. jetty-maven-plugin for development and then just deploy to Wildfly when you want to do some more extensive testing (?).

12

Pekka Hyvönen:
Dmitriy, in case you want to package and deploy to an external server, then you need to build the frontend bundle as there will not be a npm to download the dependencies and & webpack development server to package it for you on the fly. Thus you can package it without running the application in production mode by having the build-frontend goal there.

BUT, I since you’re using Widlfly and Maven, is there any reason why you’re not using the Wildfly Maven plugin instead https://docs.jboss.org/wildfly/plugins/maven/latest/ ? Then you would not have to run build-frontend for starting development server.

Or another alternative is to just use e.g. jetty-maven-plugin for development and then just deploy to Wildfly when you want to do some more extensive testing (?).

Thank you,
I will try to install the Wildfly Maven plugin.

13

Hello,

It was my mistake, I did not configure the debug mode, did not register the launch with the standalone-full.xml config.
Now everything is working fine.

Thanks @Pekka Hyvönen.