-
Notifications
You must be signed in to change notification settings - Fork 161
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Stylesheet is not found after UI.navigate to AppLayout in production mode #8292
Comments
Same problem here. I've been using On the first request, after a successful login, Vaadin tries to load the CSS from a When directly accessing the URL Vaadin is trying to load I get the following result with a 404 HTTP status:
|
Unfortunately I'm not able to understand the issue from this mixture of incomplete/not specified information.
How may I find the AppLayout view?
Which stylesheet ?
Was not able to find any steps to reproduce.
Since there are no steps to reproduce I've been trying to do the following:
Check the errors in the browser console.
|
@denis-anisimov , I'll try to add as much insight as possible. Given the following project file structure: ├── src/main/java/org/vaadin/example/
│ ├── ui
│ │ ├── layout
│ │ │ └── MainLayout.java
│ │ ├── views
│ │ │ ├── anon
│ │ │ │ └── LoginView.java
│ │ │ ├── authc
│ │ │ │ ├── ...
│ │ │ │ └── MainView.java
│ │ │ └── ...
│ │ └── ...
│ └── ...
└── ... LoginView.java@PageTitle(LoginView.TITLE)
@Route(LoginView.URL)
@StyleSheet("css/login.css")
public class LoginView extends Div implements HasComponents, RouterLayout, PageConfigurator {
(...)
LoginForm component = new LoginForm();
component.addLoginListener(e -> {
boolean isAuthenticated = authenticate(e);
if (isAuthenticated) {
UI.getCurrent().navigate(MainView.class);
} else {
component.setError(true);
}
(...)
} MainLayout.java@StyleSheet("css/main.css")
public class MainLayout extends AppLayout implements RouterLayout, PageConfigurator, AfterNavigationObserver { MainView.java@PageTitle(MainView.TITLE)
@Route(value = MainView.URL, layout = MainLayout.class)
public class MainView extends VerticalLayout implements HasComponents, RouterLayout { The problem occurs when I perform the following actions:
After step
WorkaroundAt this point, I managed to make it work by replacing |
@rolandoisidoro , thanks for clarification, I will look whether I'm able to reproduce with these steps. But still I would like to know the project configuration. I will use one of those projects ANYWAY to reproduce. |
@denis-anisimov , sorry for not providing that info earlier. In my first comment on this issue I mentioned:
I'm not using compatibility mode, nor <properties>
(...)
<vaadin.version>14.1.27</vaadin.version>
(...)
</properties>
<pluginRepositories>
<pluginRepository>
<id>central</id>
<url>https://repo1.maven.org/maven2/</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
<repositories>
<repository>
<id>central</id>
<url>https://repo1.maven.org/maven2/</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</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>
<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>
<!-- Vaadin -->
<dependency>
<groupId>com.vaadin</groupId>
<!-- vaadin-core (instead of vaadin) to use only free components -->
<artifactId>vaadin</artifactId>
<exclusions>
<!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
<exclusion>
<groupId>com.vaadin.webjar</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.insites</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymer</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.vaadin</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.webcomponents</groupId>
<artifactId>*</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-cdi</artifactId>
</dependency>
(...)
</dependencies> |
I tried to reproduce the problem and haven't seen that you use A working example with I'm wondering if @rolandoisidoro problem could be fixed with using Was there any reasoning to create different annotations @denis-anisimov? There is an explanation in the docs "In server-side views (Java), use the |
I think I've started to understand the issue. First of all: @rolandoisidoro thank you very much for quick response with the necessary details. The second thing which is important here: The only thing which is important : custom style specified via And this is just because From the javadocs of So when you use The problem is : I don't see in the comments where Anyway : when you use NPM you should put all your resources into the I assume that the location of |
I'm not sure. But
|
It seems that it is not easy to reproduce this issue and there are lots of unrelated information here. We've spent time on reproducing this issue and will not spend any more time. Please create a new ticket with the exact steps to reproduce the problem, thank you. |
Sorry, for this specific issue after spending several days I was able to reproduce it. One more time : thanks to @rolandoisidoro who helped with this. |
@denis-anisimov , sorry for coming back late to the discussion. In my case, the decision to go with
My goal was to have linked style sheets files instead of inlining them. I see you were able to reproduce the issue, can you clarify what are the conditions under which it occurs? |
Use It works fine in dev mode, it doesn't work in production mode. This is a consequence of applying URI resolution on the client side which uses compatibility mode URLs . Compatibility mode URLs should not be sent to the client side if app is running without compatibility mode. |
Description of the bug
The stylesheet is not loaded properly on
UI.navigate
for vaadin-app-layout in production mode. Not occurring in dev mode.See: appreciated/vaadin-app-layout#297, also appreciated/vaadin-app-layout#306 and vaadin/flow-spring-examples#53
Minimal reproducible example
Navigate with
UI.navigate
to an AppLayout view, e.g. from a login screen.Expected behavior
Correctly loaded stylesheet.
Actual behavior
Server can not find stylesheet, resulting in missing style until page reload.
Workaround
Replace
UI.navigate(...)
withUI.getCurrent().getPage().setLocation(...)
(suggested in appreciated/vaadin-app-layout#297)Tested versions:
The text was updated successfully, but these errors were encountered: