Flow: Cannot import CSS or Javascript files (Vaadin 14 NPM)

[Tonne-TM]

I get an error message when trying to import Javascript or CSS. When i don't import anything everything works fine (no errors).

-> Original Vaadin Forum Entry

• Vaadin 14 NPM mode
• Java 11 (Windows 10)
• Spring Boot 2.1.7
• Not using Vaadin Maven Plugin (using Gradle without vaadin-gradle-plugin)

Error message when starting:

CSS Import

@CssImport("./styles/dashboard.css")
@Theme(value = Material.class, variant = Material.DARK)
public class MainLayout extends Div implements ....

Failed to find the following css files in the node_modules or /frontend tree:
- ./styles/dashboard.css
Check that they exist or are installed.

Javascript Import

@JavaScript("./src/scripts/navigation.js")
...

Failed to resolve the following files either:
· in the /frontend sources folder
· or as a META-INF/resources/frontend resource in some JAR.
- ./src/scripts/navigation.js
Please, double check that those files exist.

Project folder structure:

[denis-anisimov]

Hi,
at which point you are getting the error ?
project build ?
running the app ?
which command do you use ?

[Tonne-TM]

I get the error when i try to run the Sping Boot Application (vaadin.productionMode=false).

Here the full console output:

``` . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _ |
\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |___, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.1.7.RELEASE)
2019-09-06 13:17:49.475 INFO 14648 --- [ main] de.projectname.WebappApplication : Starting WebappApplication on lab-023-abus2 with PID 14648 (started by user in C:UsersusernamePrivate Projectsprojectname)
2019-09-06 13:17:49.478 INFO 14648 --- [ main] de.projectname.WebappApplication : No active profile set, falling back to default profiles: default
2019-09-06 13:17:51.684 INFO 14648 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data repositories in DEFAULT mode.
2019-09-06 13:17:52.513 INFO 14648 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 822ms. Found 3 repository interfaces.
2019-09-06 13:17:52.523 INFO 14648 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data repositories in DEFAULT mode.
2019-09-06 13:17:52.647 INFO 14648 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 123ms. Found 2 repository interfaces.
2019-09-06 13:17:53.616 INFO 14648 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)
2019-09-06 13:17:53.650 INFO 14648 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2019-09-06 13:17:53.650 INFO 14648 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.22]
2019-09-06 13:17:54.118 INFO 14648 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2019-09-06 13:17:54.118 DEBUG 14648 --- [ main] o.s.web.context.ContextLoader : Published root WebApplicationContext as ServletContext attribute with name [org.springframework.web.context.WebApplicationContext.ROOT]
2019-09-06 13:17:54.118 INFO 14648 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 4551 ms
2019-09-06 13:17:54.258 INFO 14648 --- [ main] com.vaadin.flow.server.osgi.OSGiAccess : Unable to detect used OSGi framework version due to null
2019-09-06 13:18:27.505 INFO 14648 --- [ main] c.v.f.server.startup.DevModeInitializer : Starting dev-mode updaters in C:UsersusernamePrivate Projectsprojectname folder.
2019-09-06 13:18:27.510 INFO 14648 --- [ main] dev-updater : Scanning classes to find frontend configurations and dependencies...
2019-09-06 13:18:30.917 INFO 14648 --- [ main] dev-updater : Visited 3001 classes. Took 3407 ms.
2019-09-06 13:18:30.957 INFO 14648 --- [ main] dev-updater : Skipping npm install.
2019-09-06 13:18:30.957 INFO 14648 --- [ main] dev-updater : Copying frontend resources from jar files ...
2019-09-06 13:18:31.034 INFO 14648 --- [ main] dev-updater : Visited 9 jar files. Took 76 ms.
2019-09-06 13:18:31.036 WARN 14648 --- [ main] dev-updater : Use the './' prefix for files in JAR files: 'flow-component-renderer.js', please update your component.
2019-09-06 13:18:31.101 ERROR 14648 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Exception sending context initialized event to listener instance of class [com.vaadin.flow.spring.VaadinServletContextInitializer$DevModeServletContextListener]

java.lang.IllegalStateException: Failed to update the Flow imports file 'C:UsersusernamePrivate Projectsprojectnametargetfrontendgenerated-flow-imports.js'
at com.vaadin.flow.server.frontend.TaskUpdateImports.execute(TaskUpdateImports.java:128) ~[flow-server-2.0.7.jar:2.0.7]
at com.vaadin.flow.server.frontend.NodeTasks.execute(NodeTasks.java:367) ~[flow-server-2.0.7.jar:2.0.7]
at com.vaadin.flow.server.startup.DevModeInitializer.initDevModeHandler(DevModeInitializer.java:239) ~[flow-server-2.0.7.jar:2.0.7]
at com.vaadin.flow.spring.VaadinServletContextInitializer$DevModeServletContextListener.contextInitialized(VaadinServletContextInitializer.java:288) ~[vaadin-spring-12.0.3.jar:na]
at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4680) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5143) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1384) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1374) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at java.base/java.util.concurrent.FutureTask.run$$$capture(FutureTask.java:264) ~[na:na]
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java) ~[na:na]
at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at java.base/java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:140) ~[na:na]
at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:909) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:841) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1384) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1374) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at java.base/java.util.concurrent.FutureTask.run$$$capture(FutureTask.java:264) ~[na:na]
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java) ~[na:na]
at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at java.base/java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:140) ~[na:na]
at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:909) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.StandardEngine.startInternal(StandardEngine.java:262) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.StandardService.startInternal(StandardService.java:421) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.core.StandardServer.startInternal(StandardServer.java:932) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.apache.catalina.startup.Tomcat.start(Tomcat.java:456) ~[tomcat-embed-core-9.0.22.jar:9.0.22]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:105) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.(TomcatWebServer.java:86) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getTomcatWebServer(TomcatServletWebServerFactory.java:416) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getWebServer(TomcatServletWebServerFactory.java:180) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.createWebServer(ServletWebServerApplicationContext.java:180) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:153) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:543) ~[spring-context-5.1.9.RELEASE.jar:5.1.9.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:141) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:743) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:390) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:312) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1214) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1203) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at de.projectname.WebappApplication.main(WebappApplication.java:19) ~[classes/:na]
Caused by: java.lang.IllegalStateException:

Failed to resolve the following files either:
· in the /frontend sources folder
· or as a META-INF/resources/frontend resource in some JAR.
- ./src/scripts/navigation.js
Please, double check that those files exist.

at com.vaadin.flow.server.frontend.TaskUpdateImports.getModuleLines(TaskUpdateImports.java:261) ~[flow-server-2.0.7.jar:2.0.7]
at com.vaadin.flow.server.frontend.TaskUpdateImports.getMainJsContent(TaskUpdateImports.java:139) ~[flow-server-2.0.7.jar:2.0.7]
at com.vaadin.flow.server.frontend.TaskUpdateImports.execute(TaskUpdateImports.java:125) ~[flow-server-2.0.7.jar:2.0.7]
... 43 common frames omitted

2019-09-06 13:18:31.200 ERROR 14648 --- [ main] o.apache.catalina.core.StandardContext : One or more listeners failed to start. Full details will be found in the appropriate container log file
2019-09-06 13:18:31.201 ERROR 14648 --- [ main] o.apache.catalina.core.StandardContext : Context [] startup failed due to previous errors
2019-09-06 13:18:31.356 INFO 14648 --- [ main] o.apache.catalina.core.StandardService : Stopping service [Tomcat]
2019-09-06 13:18:31.361 WARN 14648 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
2019-09-06 13:18:31.370 INFO 14648 --- [ main] ConditionEvaluationReportLoggingListener :

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2019-09-06 13:18:31.379 ERROR 14648 --- [ main] o.s.boot.SpringApplication : Application run failed

org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:156) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:543) ~[spring-context-5.1.9.RELEASE.jar:5.1.9.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:141) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:743) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:390) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:312) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1214) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1203) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at de.projectname.WebappApplication.main(WebappApplication.java:19) ~[classes/:na]
Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:124) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.(TomcatWebServer.java:86) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getTomcatWebServer(TomcatServletWebServerFactory.java:416) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getWebServer(TomcatServletWebServerFactory.java:180) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.createWebServer(ServletWebServerApplicationContext.java:180) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:153) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
... 8 common frames omitted
Caused by: java.lang.IllegalStateException: StandardEngine[Tomcat].StandardHost[localhost].TomcatEmbeddedContext[] failed to start
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.rethrowDeferredStartupExceptions(TomcatWebServer.java:169) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:108) ~[spring-boot-2.1.7.RELEASE.jar:2.1.7.RELEASE]
... 13 common frames omitted

```

[denis-anisimov]

The explanation of this behavior is: you don't use plugin which should execute prepare-frontend goal which produces flow-build-info.json file where frontendFolder value is written.
As a result the real frontend folder is ignored and some other (with a location which may don't even exist) is used.

This is a consequence of magic and logic which is not isolated in one place with spread out over the code in various places.
It's not possible to understand what's going on unless you have written the code and know how it works from the beginning to the end.

As a result we have a lot of confusion with various scenarios and every time I spend a lot of time to understand what't going on.

Apparently so magic and complicated code doesn't have proper error catching so that in case something goes wrong it prints a good message with a detailed description and exact steps to fix.

E.g. in this case I believe flow-build-info.json is just absent. This can be detected and reported.
The frontend folder which is used in this situation should be logged (DevModeInitializer::initDevModeHandler).
If this folder doesn't exist then it means that something is already wrong.
And this should throw an exception.

Also @Legioth recently made a bunch of tickets related to better the error reporting . May be some of those tickets cover this situation as well.

[Tonne-TM]

How can i generate a flow-build-info.json by hand (without using maven) to get my project starting?
(i can also confirm that i cant find any flow-build-info.json in my project folder)

[Legioth]

prepare-frontend should no longer be needed as of https://github.com/vaadin/flow/issues/6233. It looks like the fix for that issue is released a couple of days ago in version 2.0.10 of Flow, whereas you seem to be using version 2.0.7.

The new Flow version is included in Vaadin 14.0.3 which was also released two days ago. You could try updating to that version.

[Legioth]

Potentially relevant discussion also in https://github.com/vaadin/flow/issues/6277.

[Tonne-TM]

I updated from Vaadin 14.0.0 to 14.0.3
now i'm getting the following error message:

  Failed to find the following files: 
      - ./src/scripts/navigation.js

  Locations searched were:
      - `C:\Users\username\Projects\mainfolder\.\frontend` in this project
      - `META-INF/resources/frontend` in included JARs

  Please, double check that those files exist. If you use a custom directory for your resource files instead of default `frontend` folder then make sure you it's correctly configured (e.g. set 'vaadin.frontend.frontend.folder' property)

Something is wrong with the path. I got a multi module project and the path to the correct frontend folder would be:
C:\Users\username\Projects\mainfolder\webapp\frontend

[Tonne-TM]

I was able to solve the problem. Because of my multi module project i had to relocate the frontend folder to:
C:\Users\username\Projects\mainfolder\frontend

The better error message from 14.0.3 helped a lot.

[Legioth]

That's actually as expected. The special handling for https://github.com/vaadin/flow/issues/6233 assumes that the working directory of the server process is the root of the project that contains e.g. frontend/ and package.json. Moving those files to the project root is an interesting workaround, which also means that it's slightly fragile and not something I'd want to rely on in the long run...

"Proper" functionality in a multi module project is dependent on a flow-build-info.json. Manually creating the file could work for the basic case, but it would not be relocatable to different machines and it would also have the problem that you'd need different files for development mode and production mode. If you want to go that route, then I'd currently recommend reverse engineering the contents of the file based on simple Maven examples from https://vaadin.com/start.

[denis-anisimov]

That's actually as expected.

Let's say : this is by design.
But apparently this is not expected by the user/developer.

The main issue is : even if it works by design it's too hard to understand what's going on there and how to fix it....

The error message reported initially in the ticket doesn't help anyhow.

The better error message from 14.0.3 helped a lot.

Now it's better.
And may be it should be even more better: proposing some steps how to fix this (with may be some heuristic checks/assumptions).

[kolle1986]

Caused by: java.lang.IllegalStateException: Failed to determine project directory for dev mode. Directory '/Users/nemanja/eclipse/jee-2020-06/Eclipse.app/Contents/MacOS' does not look like a Maven or Gradle project. Ensure that you have run the prepare-frontend Maven goal, which generates 'flow-build-info.json', prior to deploying your application