Thomas•2w ago

Separate importmap file for static website

I have a folder in my Deno app for a static Website. The content could look like this:

// index.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="importmap" src="importmap.json"></script>
  <script type="module" src="main.js"></script>
</head>
<body></body>
</html>

// index.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="importmap" src="importmap.json"></script>
  <script type="module" src="main.js"></script>
</head>
<body></body>
</html>

// importmap.json
{
  "imports": {
    "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.15"
  }
}

// importmap.json
{
  "imports": {
    "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.15"
  }
}

// main.js
import { Calendar } from '@fullcalendar/core';

// main.js
import { Calendar } from '@fullcalendar/core';

And I use an importmap.json for this Website. However, Deno complains with the following error message: Relative import path "@fullcalendar/core" not prefixed with / or ./ or ../ and not in import map from "main.js" Hint: Use [deno add @fullcalendar/core] to add the dependency.deno(resolver-error) But, I don't want to add @fullcalendar/core or other website libs to the deno.json. Server-Side and Client-Side libs should remain separate. How can I prevent Deno from detecting an error here?

1 Reply

ThomasOP•2w ago

Okay, I'm probably a bit early. Client-side import map is probably still a thing of the future. https://github.com/WICG/import-maps?tab=readme-ov-file#import-map-processing https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

MDN Web Docs

- HTML: HyperText Markup Language | MDN

The importmap value of the type attribute of the element indicates that the body of the element contains an import map.

GitHub

GitHub - WICG/import-maps: How to control the behavior of JavaScrip...

How to control the behavior of JavaScript imports. Contribute to WICG/import-maps development by creating an account on GitHub.

Separate importmap file for static website

Did you find this page helpful?