Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Setting both --preload and --integrity causes errors on Chrome #399

Closed
novucs opened this issue Jan 5, 2025 · 2 comments
Closed

Setting both --preload and --integrity causes errors on Chrome #399

novucs opened this issue Jan 5, 2025 · 2 comments

Comments

@novucs
Copy link
Contributor

novucs commented Jan 5, 2025 •
edited
Loading

Creating a new index.html with the following:

jspm -m index.html install lit --preload --integrity

Produces the following file

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JSPM example</title>
    <script async src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js" crossorigin="anonymous" integrity="sha384-Hok7DTJAIE3Lg5kUcqmcAAkRaMEdZT4F4cCvPlpYXxh/IMdTwn3eXGt29uHYW1/v"></script>
    <script type="importmap">
    {
      "imports": {
        "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js"
      },
      "scopes": {
        "https://ga.jspm.io/": {
          "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
          "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
          "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
          "lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js"
        }
      },
      "integrity": {
        "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js": "sha384-DKBHNTNeJPUVdqutLrSIBTEUwDfhYrSkQ9Gl+uP9ocW7E3MvZsFhgMzQ7+xnF8b1",
        "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js": "sha384-0yEeSprlh1bQedf3D38C5bRwsEu6Bq74vrnM0ylPMFICNKHn8dLLFmQODUBxYRG5",
        "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js": "sha384-ABdldqrURlM48P3FqXMBxoKKA9zHBhTENjpRvDVI4VmEwB0cX31ZJt7BiSlQXR4b",
        "https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js": "sha384-4ZuvQOqv84SmXuposK4eOeE2qRekjAgrozXPJVjxdlzE4X0ArviV1leG9VM/A0uK",
        "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js": "sha384-rVqBlyh8UMFPGwH+m6PxUD31oXk3xAF0wjR2776Y5oIFdy1JGJAtYxDmwH3bQQTS",
        "https://ga.jspm.io/npm:lit@3.2.1/index.js": "sha384-IZzW+Sfdx55gIfvWXINdnp5aNwUifd4IB0ROrRyipc+QWqXXpJhcbmT2+7tx9CCN"
      }
    }
    </script>
    <link rel="modulepreload" href="https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js" />
    <link rel="modulepreload" href="https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js" />
    <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js" />
    <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js" />
    <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js" />
    <link rel="modulepreload" href="https://ga.jspm.io/npm:lit@3.2.1/index.js" />
  </head>
  <body>
  </body>
</html>

Loading on Chome produces the following errors:

image

Log available here:

console.log 
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
A preload for '<URL>' is found, but is not used due to an integrity mismatch.
localhost/:30 A preload for 'https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js' is found, but is not used due to an integrity mismatch.
localhost/:31 A preload for 'https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js' is found, but is not used due to an integrity mismatch.
localhost/:32 A preload for 'https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js' is found, but is not used due to an integrity mismatch.
localhost/:33 A preload for 'https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js' is found, but is not used due to an integrity mismatch.
localhost/:34 A preload for 'https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js' is found, but is not used due to an integrity mismatch.
localhost/:35 A preload for 'https://ga.jspm.io/npm:lit@3.2.1/index.js' is found, but is not used due to an integrity mismatch.
:8000/favicon.ico:1 
        
        
       Failed to load resource: the server responded with a status of 404 (File not found)
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit@3.2.1/index.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit@3.2.1/index.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
localhost/:1 The resource https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Manually specifying the integrity attribute on the modulepreload links to what exists in the importmap stops these errors. I might be wrong but I think JSPM should supply integrity attributes for the modulepreload links if the --integrity option is defined.

Example with integrity attributes added:

index.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSPM example</title>
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js" crossorigin="anonymous"
          integrity="sha384-Hok7DTJAIE3Lg5kUcqmcAAkRaMEdZT4F4cCvPlpYXxh/IMdTwn3eXGt29uHYW1/v"></script>
  <script type="importmap">
    {
      "imports": {
        "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js"
      },
      "scopes": {
        "https://ga.jspm.io/": {
          "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
          "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
          "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
          "lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js"
        }
      },
      "integrity": {
        "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js": "sha384-DKBHNTNeJPUVdqutLrSIBTEUwDfhYrSkQ9Gl+uP9ocW7E3MvZsFhgMzQ7+xnF8b1",
        "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js": "sha384-0yEeSprlh1bQedf3D38C5bRwsEu6Bq74vrnM0ylPMFICNKHn8dLLFmQODUBxYRG5",
        "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js": "sha384-ABdldqrURlM48P3FqXMBxoKKA9zHBhTENjpRvDVI4VmEwB0cX31ZJt7BiSlQXR4b",
        "https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js": "sha384-4ZuvQOqv84SmXuposK4eOeE2qRekjAgrozXPJVjxdlzE4X0ArviV1leG9VM/A0uK",
        "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js": "sha384-rVqBlyh8UMFPGwH+m6PxUD31oXk3xAF0wjR2776Y5oIFdy1JGJAtYxDmwH3bQQTS",
        "https://ga.jspm.io/npm:lit@3.2.1/index.js": "sha384-IZzW+Sfdx55gIfvWXINdnp5aNwUifd4IB0ROrRyipc+QWqXXpJhcbmT2+7tx9CCN"
      }
    }
  </script>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/css-tag.js"
        integrity="sha384-DKBHNTNeJPUVdqutLrSIBTEUwDfhYrSkQ9Gl+uP9ocW7E3MvZsFhgMzQ7+xnF8b1"/>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js"
        integrity="sha384-0yEeSprlh1bQedf3D38C5bRwsEu6Bq74vrnM0ylPMFICNKHn8dLLFmQODUBxYRG5"/>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js"
        integrity="sha384-ABdldqrURlM48P3FqXMBxoKKA9zHBhTENjpRvDVI4VmEwB0cX31ZJt7BiSlQXR4b"/>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-html@3.2.1/development/is-server.js"
        integrity="sha384-4ZuvQOqv84SmXuposK4eOeE2qRekjAgrozXPJVjxdlzE4X0ArviV1leG9VM/A0uK"/>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js"
        integrity="sha384-rVqBlyh8UMFPGwH+m6PxUD31oXk3xAF0wjR2776Y5oIFdy1JGJAtYxDmwH3bQQTS"/>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:lit@3.2.1/index.js"
        integrity="sha384-IZzW+Sfdx55gIfvWXINdnp5aNwUifd4IB0ROrRyipc+QWqXXpJhcbmT2+7tx9CCN"/>
</head>
<body>
</body>
</html>
@novucs novucs mentioned this issue Jan 5, 2025
Merged
@novucs
Copy link
Contributor Author

novucs commented Jan 6, 2025

Closing as fix is merged

@novucs novucs closed this as completed Jan 6, 2025
@guybedford
Copy link
Member

Releasing now in 2.4.2, which should pull into the version range of the CLI upgrade path without a release required downstream.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@guybedford @novucs