[rollup-plugin-html] Incorrect <script type="module"> order

Open jdcoldsmith opened this issue 2 years ago • 1 comments

Versions

@web/rollup-plugin-html: 2.0.1 rollup: 3.29.3

Plugin config

// plugin for generating HTML files from rollup
    html({
      // [not working yet] don't build mobile (we have another rollup.config.mobile.js for that)
      exclude: [ 'mobile/**', ...pagesToIgnore ],
      // keep our file structure intact
      flattenOutput: false,
      // the root directory to start at
      rootDir: 'source',
      // keep non-module assets
      extractAssets: true,
      // make whitelabel replacements (if whitelabel exists)
      transformHtml: (html) => {
        if (!!WHITELABEL_NAME) html = html.replace(/Katapult/g, WHITELABEL_NAME);
        return html;
      }
    })

Pre-bundled index.html file

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script>
    // Redirect if Mobile
    if (/(mobile|ipad|android|iphone)/i.test(navigator.userAgent)) {
      window.location.replace(window.location.href.replace('/map/', '/mobile/'));
    }
  </script>
  <script src="../../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
  <script type="module" src="../_resources/app-configuration/app-configuration.js"></script>
  <script type="module" src="../_resources/elements/katapult-maps-desktop/katapult-maps-desktop.js"></script>

  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Material Symbols -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/>
  <!--Favicon Code-->
  <link rel="apple-touch-icon" sizes="180x180" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon-16x16.png">
  <link rel="mask-icon" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/safari-pinned-tab.svg" color="#003e51">
  <link rel="shortcut icon" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon.ico">
  <meta name="msapplication-config" content="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/browserconfig.xml">
  <meta name="theme-color" content="#003E51">
  <!--End Favicon Code-->
  

</head>

  <body>
    <katapult-maps-desktop id="katapultMaps"></katapult-maps-desktop>
  </body>

</html>

Bundled index.html file

<!DOCTYPE html><html><head>
  <meta charset="UTF-8">
  <script>
    // Redirect if Mobile
    if (/(mobile|ipad|android|iphone)/i.test(navigator.userAgent)) {
      window.location.replace(window.location.href.replace('/map/', '/mobile/'));
    }
  </script>
  <script src="../assets/web-animations-next-lite.min-79f638b4.js"></script>
  
  

  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Material Symbols -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
  <!--Favicon Code-->
  <link rel="apple-touch-icon" sizes="180x180" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon-16x16.png">
  <link rel="mask-icon" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/safari-pinned-tab.svg" color="#003e51">
  <link rel="shortcut icon" href="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/favicon.ico">
  <meta name="msapplication-config" content="https://storage.googleapis.com/katapult-pro-shared-files/photos/favicons/Katapult/browserconfig.xml">
  <meta name="theme-color" content="#003E51">
  <!--End Favicon Code-->
  

</head>

  <body>
    <katapult-maps-desktop id="katapultMaps"></katapult-maps-desktop>
  


<script type="module" src="../katapult-maps-desktop.js"></script><script type="module" src="../app-configuration.js"></script></body></html>

Issue

The problem here is that after being bundled, the page will now execute the ../katapult-maps-desktop.js script before the ../app-configuration.js script which is not the correct order according to the pre-bundled file. This issue came about when upgrading from [email protected] to v3. Also interestingly, this only happens to certain pages. We have multiple pages in our app with similar index.html files as this one but it seems random as to which ones build with an incorrect script order and which ones build correctly. Any help would be appreciated!

Sep 27 '23 16:09 jdcoldsmith

Update! While this still does seem like a bug, my workaround was to import app-configuration.js at the top of katapult-maps-desktop.js instead of it being imported using a script tag.

Oct 06 '23 14:10 jdcoldsmith