AceEditor not showing theme nor mode in Vaadin 23 with Vaadin context "/myapp"

[robert4381]

Describe the bug
Editor shows but without theme / mode

To Reproduce

1. Use Vaadin Start to create an app with security on some views
2. Change Vaadin context to "myapp".
3. Add aceEditor to any secure view.

    @Bean
    public ServletRegistrationBean frontendServletBean() {
        ServletRegistrationBean bean = new ServletRegistrationBean<>(new VaadinServlet() {
            @Override
            protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                if (!serveStaticOrWebJarRequest(req, resp)) {
                    resp.sendError(404);
                }
            }
        }, "/myapp/frontend/*");
        bean.setLoadOnStartup(1);
        return bean;
    }

  markdownEditor = new AceEditor();
  markdownEditor.setShowGutter(true);
  markdownEditor.setVisible(true);
  markdownEditor.setAutoComplete(false);
  markdownEditor.setInitialFocus(true);
  markdownEditor.setUseWorker(true);
  markdownEditor.setHighlightActiveLine(true);
  markdownEditor.setHighlightSelectedWord(true);
  markdownEditor.setMode(AceMode.markdown);
  markdownEditor.setTheme(AceTheme.chrome);
  markdownEditor.setWidthFull();
  markdownEditor.setWrap(true);
  add(markdownEditor);

@EnableWebSecurity
@Configuration
public class AppSecurityConfiguration extends VaadinWebSecurityConfigurerAdapter {

    public static final String LOGOUT_URL = "/";
    private static final RequestMatcher PROTECTED_URLS = new OrRequestMatcher(new AntPathRequestMatcher("/myapp/**"));
    private static final RequestMatcher PUBLIC_URLS = new NegatedRequestMatcher(PROTECTED_URLS);

	...
	
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        setLoginView(http, LoginView.class, LOGOUT_URL);
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
        web.ignoring().requestMatchers(PUBLIC_URLS);
    }
}    

Screenshots

Desktop:

• OS: MacOS Monterey
• Browser Safari & Firefox

Vaadin + Spring

• Vaadin: 23.0.7
• Spring boot: 2.6.7

Additional context

• Vaadin context is "myapp"

Browser console output

• Loading failed for the <script> with source “http://localhost:8080/myapp/ace-builds/src-min-noconflict/theme-chrome.js”.
• Loading failed for the <script> with source “http://localhost:8080/myapp/ace-builds/src-min-noconflict/mode-markdown.js”.
• The resource from “http://localhost:8080/myapp/ace-builds/src-min-noconflict/theme-chrome.js” was blocked due to MIME type (“”) mismatch (X-Content-Type-Options: nosniff).
• The resource from “http://localhost:8080/myapp/ace-builds/src-min-noconflict/mode-markdown.js” was blocked due to MIME type (“”) mismatch (X-Content-Type-Options: nosniff).

Fix attempt
Adding baseUrl to security white list but without success:

• /myapp/ace-builds/src-min-noconflict/**
• /myapp/ace-builds/**

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
        web.ignoring().requestMatchers(PUBLIC_URLS).antMatchers("/myapp/ace-builds/src-min-noconflict/**");
    }

Error in console changed to:

• Loading failed for the <script> with source “http://localhost:8080/myapp/ace-builds/src-min-noconflict/theme-chrome.js”.
• Loading failed for the <script> with source “http://localhost:8080/myapp/ace-builds/src-min-noconflict/mode-markdown.js”.

[F0rce]

Hei @robert4381,

first of all thanks for the super detailed issue.

Could you please provide your current project setup (if possible) as zip that I could try it locally.

Before that you could try using the markdownEditor.setBaseUrl() method as follows:

    markdownEditor.setBaseUrl("myapp/ace-builds/src-min-noconflict/");

Maybe that will already fix your issue,
David

[robert4381]

Hi David

I tried setting baseUrl but without success. Here is the project: myapp.

my-app.zip

This is a simple start.vaadin.com generated project with role based security. I just moved Vaadin context to "/myapp".

To run:
mvn clean package spring-boot:run -Pproduction

Open browser in:

localhost:8080/myapp

Thanks for your amazing project.

Roberto.

[markuzzi]

Hi Roberto,

for me it works if I set the baseUrl as follows:

markdownEditor.setBaseUrl("/ace-builds/src-min-noconflict/");

[F0rce]

@robert4381 Sorry for the super late reply again. I was busy finishing my final project for my apprenticeship.

I can confirm that @markuzzi 's way worked, just tested it on my system.

I will close this issue, as it is resolved and will try to add some kind of documentation for that.

Sorry again,
David

[archiecobbs]

Please see discussion here.

It seems like this is a real bug, and the markdownEditor.setBaseUrl() hack is just a workaround for the bug.

According to that discussion this is the source of the bug:

[AceEditor] uses a custom mechanism for loading static resources instead of relying on the mechanisms provided by Vaadin, such as the @JavaScript annotation or Page::addJavaScript

@F0rce - your thoughts?