Vaadin 14 production mode and Safari issue

Question

I've recently switched my app to Vaadin 14 native NPM (non-compatibility mode) and production mode. Vaadin version is 14.3.7. It's a Spring Boot app packaged as an executable .war file using Gradle. I'm using the Vaadin Gradle plugin.

Things work fine, except in Safari (iOS + Mac) where the app is not usable. Following error can be seen on Mac:

TypeError: 'text/html' is not a valid JavaScript MIME type.

I've found sources saying that ES6 modules can cause this error on Safari, but I think Vaadin transpiles to ES5 in production mode by default.

What can I do to make things work on Safari as well?

Update Some relevant pieces from the build.gradle file:

plugins {
    ...
    id 'com.vaadin' version '0.8.0'
}

ext{
    ...
    set('vaadinVersion', "14.3.7")
}

dependencies {
    ...
    implementation('com.vaadin:vaadin-spring-boot-starter') {
        ["com.vaadin.webjar", "org.webjars.bowergithub.insites",
         "org.webjars.bowergithub.polymer", "org.webjars.bowergithub.polymerelements",
         "org.webjars.bowergithub.vaadin", "org.webjars.bowergithub.webcomponents"]
                .forEach { group -> exclude(group: group) }
    }
    ...
}

vaadin {
    optimizeBundle = true
    pnpmEnable = true
    productionMode = true
}

Answer 1

It turned out to be caused by a combination of the following:

• The app is fronted by an Apache server that redirects to a SSO when not logged in.
• Vaadin loads the bundle as an ES6 module.
• Safari does not send cookies when loading ES6 modules, except when crossorigin="use-credentials" is added.
• Vaadin only adds crossorigin, not crossorigin="use-credentials" (which can be considered a bug since they officially support Safari).

For more info, see https://jakearchibald.com/2017/es-modules-in-browsers/, https://stackoverflow.com/a/52559612/775138 and the comment there by John Meinken.

We worked around this by configuring Apache to not secure the path to the bundle.