Vaadin 14 Simple App: "compilation unit is not on the build path"

Hi,
I just downloaded and built the “Simple App” starter project.
In eclipse I ran Maven install in the parent project and thereafter “mvn jetty:run” in a command box.
No problems so far, looks nice and works a expected.

However, if I try to modify a Java class, I get an error message
“This compilation unit is not on the build path of the Java project.”

It seems I have missed something fundamental, but cannot see what.
Up to now, I have been working with Vaadin 7 without getting stuck;-)

Any ideas??

i have more problems.

downloaded also the sample.

compiled and deployed on wildfly-16, no style, no login-view and warnings in log.

with jetty:run, only a long error blog after new clean install.

[main]
 WARN dev-updater - Use the './' prefix for files in JAR files: 'flow-component-renderer.js', please update your component.
[main]
 INFO dev-updater -

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


[main]
 INFO dev-updater - Updated D:\development\demo\demo-ui\target\frontend\generated-flow-imports.js
[main]
 INFO dev-webpack - Starting webpack-dev-server, port: 54086 dir: D:\development\demo\demo-ui
   D:\nodejs\node.exe D:\development\demo\demo-ui\node_modules\webpack-dev-server\bin\webpack-dev-server.js --config D:\development\demo\demo-ui\webpack.config.js --port 54086 -d --inline=false
[webpack]
 INFO dev-webpack - i ?wds?: Project is running at http://localhost:54086/webpack-dev-server/
[webpack]
 INFO dev-webpack - i ?wds?: webpack output is served from /
[webpack]
 INFO dev-webpack - i ?wds?: Content not from webpack is served from D:\development\demo\demo-ui\target\classes\META-INF\VAADIN, src/main/webapp
[webpack]
 INFO dev-webpack -          Serving the 'stats.json' file dynamically.
[webpack]
 INFO dev-webpack - × ?wdm?: Hash: d241b9cd28baf1b817a2
[webpack]
 INFO dev-webpack - Version: webpack 4.30.0
[webpack]
 INFO dev-webpack - Time: 5859ms
[webpack]
 INFO dev-webpack - Built at: 2019-08-15 6:23:43 PM
[webpack]
 INFO dev-webpack -                                                                  Asset       Size      Chunks                    Chunk Names
[webpack]
 INFO dev-webpack -                      build/vaadin-bundle-c3768530e07f0fd0381f.cache.js   3.99 MiB      bundle  [emitted]
  [big]
  bundle
[webpack]
 INFO dev-webpack -                  build/vaadin-bundle.es5-edfa04bbb22187862763.cache.js   4.53 MiB  bundle.es5  [emitted]
  [big]
  bundle.es5
[webpack]
 INFO dev-webpack -                                       build\webcomponentsjs\LICENSE.md   1.52 KiB              [emitted]

[webpack]
 INFO dev-webpack -                                        build\webcomponentsjs\README.md   10.9 KiB              [emitted]

[webpack]
 INFO dev-webpack -                      build\webcomponentsjs\bundles\webcomponents-ce.js   16.7 KiB              [emitted]

[webpack]
 INFO dev-webpack -                  build\webcomponentsjs\bundles\webcomponents-ce.js.map    112 KiB              [emitted]

[webpack]
 INFO dev-webpack -                build\webcomponentsjs\bundles\webcomponents-sd-ce-pf.js    108 KiB              [emitted]

[webpack]
 INFO dev-webpack -            build\webcomponentsjs\bundles\webcomponents-sd-ce-pf.js.map    653 KiB              [emitted]

[webpack]
 INFO dev-webpack -                   build\webcomponentsjs\bundles\webcomponents-sd-ce.js   80.9 KiB              [emitted]

[webpack]
 INFO dev-webpack -               build\webcomponentsjs\bundles\webcomponents-sd-ce.js.map    527 KiB              [emitted]

[webpack]
 INFO dev-webpack -                      build\webcomponentsjs\bundles\webcomponents-sd.js   65.1 KiB              [emitted]

[webpack]
 INFO dev-webpack -                  build\webcomponentsjs\bundles\webcomponents-sd.js.map    415 KiB              [emitted]

[webpack]
 INFO dev-webpack -                   build\webcomponentsjs\custom-elements-es5-adapter.js  924 bytes              [emitted]

[webpack]
 INFO dev-webpack - build\webcomponentsjs\entrypoints\custom-elements-es5-adapter-index.js  656 bytes              [emitted]

[webpack]
 INFO dev-webpack -        build\webcomponentsjs\entrypoints\webcomponents-bundle-index.js   1.66 KiB              [emitted]

[webpack]
 INFO dev-webpack -            build\webcomponentsjs\entrypoints\webcomponents-ce-index.js  672 bytes              [emitted]

[webpack]
 INFO dev-webpack -         build\webcomponentsjs\entrypoints\webcomponents-sd-ce-index.js  851 bytes              [emitted]

[webpack]
 INFO dev-webpack -      build\webcomponentsjs\entrypoints\webcomponents-sd-ce-pf-index.js   1.19 KiB              [emitted]

[webpack]
 INFO dev-webpack -            build\webcomponentsjs\entrypoints\webcomponents-sd-index.js  761 bytes              [emitted]

[webpack]
 INFO dev-webpack -                                     build\webcomponentsjs\package.json   2.98 KiB              [emitted]

[webpack]
 INFO dev-webpack -                          build\webcomponentsjs\webcomponents-bundle.js    109 KiB              [emitted]

[webpack]
 INFO dev-webpack -                      build\webcomponentsjs\webcomponents-bundle.js.map    655 KiB              [emitted]

[webpack]
 INFO dev-webpack -                          build\webcomponentsjs\webcomponents-loader.js   6.13 KiB              [emitted]

[webpack]
 INFO dev-webpack - Entrypoint bundle [big]
 = build/vaadin-bundle-c3768530e07f0fd0381f.cache.js
[webpack]
 INFO dev-webpack - Entrypoint bundle.es5 [big]
 = build/vaadin-bundle.es5-edfa04bbb22187862763.cache.js
[webpack]
 INFO dev-webpack - [../node_modules/@polymer/iron-list/iron-list.js]
 58.7 KiB {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@polymer/iron-list/iron-list.js]
 57.4 KiB {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-button/theme/lumo/vaadin-button.js]
 72 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-button/theme/lumo/vaadin-button.js]
 72 bytes {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox-group.js]
 126 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox-group.js]
 126 bytes {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox.js]
 76 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox.js]
 76 bytes {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-context-menu/theme/lumo/vaadin-context-menu.js]
 204 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-context-menu/theme/lumo/vaadin-context-menu.js]
 204 bytes {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-grid/theme/lumo/vaadin-grid-column-group.js]
 47 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-grid/theme/lumo/vaadin-grid-column-group.js]
 47 bytes {bundle} [built]

[webpack]
 INFO dev-webpack - [../node_modules/@vaadin/vaadin-grid/theme/lumo/vaadin-grid-column.js]
 41 bytes {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../target/frontend/generated-flow-imports.js]
 2.42 KiB {bundle.es5} [built]

[webpack]
 INFO dev-webpack - [../target/frontend/generated-flow-imports.js]
 2.42 KiB {bundle} [built]

[webpack]
 INFO dev-webpack -     + 362 hidden modules
[webpack]
 INFO dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 38:0-59
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 38:0-59
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 45:0-55
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/contextMenuConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 45:0-55
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/flow-component-renderer.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 27:0-58
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/flow-component-renderer.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 27:0-58
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 33:0-52
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 33:0-52
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 44:0-48
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/gridConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 44:0-48
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 32:0-56
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListConnector-es6.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 32:0-56
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 43:0-52
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 43:0-52
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListStyles.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 29:0-49
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/ironListStyles.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 29:0-49
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/selectConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 46:0-50
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/selectConnector.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 46:0-50
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/vaadin-grid-flow-selection-column.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 24:0-68
[webpack]
 ERROR dev-webpack -
[webpack]
 ERROR dev-webpack - ERROR in ../target/frontend/generated-flow-imports.js
[webpack]
 ERROR dev-webpack - Module not found: Error: Can't resolve '@vaadin/flow-frontend/vaadin-grid-flow-selection-column.js' in 'D:\development\demo\demo-ui\target\frontend'
[webpack]
 ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js 24:0-68
[webpack]
 ERROR dev-webpack - i ?wdm?: Failed to compile.
[webpack]
 ERROR dev-webpack -
------------------ Frontend compilation failed. -----------------

wrote it also here: https://vaadin.com/forum/thread/17799644/17800155

Hi
We had the same problem moving from spring-boot to wildfly/jboss. Today we are able to deploy on wildfly/jboss, but we are still investigating this issue. The problem seems to be the directory: ‘node_modules/@vaadin/flow-frontend’. This is created if you start a jar as “spring boot app” in eclipse, but the dir disappears or is not created when you deploy on wildfly/jboss.

The workaround is, depending on the goal of vaadin-plugin (prepare or deploy-frontend), to manually copy the ‘flow-frontend’ directory in the directory used by webpack.

…step by step to understand how we find the workaround:

  • We started downloading the starter (spring boot) from the vaadin webpage. The next steps it was to “install npm” (in eclipse “run as” → “npm install”) without the change the pom file for wildfly deployment => the node_module directory is creted.
  • we build with maven
  • we started the app as spring boot app (in eclipse: Run as → spring boot app) - In this case the ‘flow-frontend’ directory is created at “starting time”.

When you start or deploy the package on wildfly/jboss, the front-end get prepared or build. This depends from the goal in vaadin-plugin (prepare or deploy-frontend).

You can find more information here: https://vaadin.com/docs/v14/flow/production/tutorial-production-mode-advanced.html

The vaadin-plugin goal configures a dir used by webpack. If you look in you WAR file: /WEB-INF/classes/META-INF/VAADIN/config/flow-build-info.json, you will find this information. Using params together with the defined goal in the pom, will help with the configuration.

To have better understanding of this issue, you can play with the vaadin.plugin goal (prepare and build-frontend), look what’s happening at deployment time, undeploy/deploy, restart the server and look the appSrv log.

I hope this will help.