[icon] Page reload because of error in Safari when importing icon

web-padawan commented 1 year ago

Description

This looks like a regression from #5334 - reproducible in dev pages.

Expected outcome

The dev page should open and show the icon.

Minimal reproducible example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Icon</title>
    <script type="module" src="./common.js"></script>
  </head>

  <body>
    <vaadin-icon icon="vaadin:phone"></vaadin-icon>

    <script type="module">
      import '@vaadin/icon';
      import '@vaadin/icons/vaadin-iconset.js'
    </script>
  </body>
</html>

Steps to reproduce

Open the dev/icon.html page in this monorepo

Environment

Vaadin version(s): 24.0 and further

Browsers

Safari

Note

Removing this line seems to fix the issue:

   <script type="module" src="./common.js"></script>

web-padawan commented 1 year ago

Managed to narrow it down to the following imports order:

First, common.js file imports the autoload entrypoint:

https://github.com/vaadin/web-components/blob/da6fca1e9c5970ddf0d3a34051d450290e436cdc/packages/vaadin-lumo-styles/test/autoload.js#L9

Then autoload imports vaadin-iconset.js among others

https://github.com/vaadin/web-components/blob/da6fca1e9c5970ddf0d3a34051d450290e436cdc/packages/vaadin-lumo-styles/all-imports.js#L32

This causes issues with internal Polymer library imports:

web-padawan commented 1 year ago

So I managed to rewrite vaadin-iconset to not use PolymerElement and be regular HTMLElement instead. However, that doesn't help: Safari still fails on unsafeSVG directive import with the following error:

web-padawan commented 1 year ago

Summary: the problem only occurs under special conditions when using autoload.js that is not published to npm. Let's close this issue for now and consider re-opening in case if someone else can actually face it in the real app.

vaadin / web-components