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?

Deno•16mo ago•

1 reply

Thomas

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';

Separate importmap file for static website

Similar Threads

Separate importmap file for static website

Similar Threads

Similar Threads

Similar Threads