Trying to add the Lit JS framework to an existing Spring Boot project via Webjar dependency in gradle. Results in:Failed to resolve module specifier

Question

When I try to use the framework I am seeing this error in the browser:

 Failed to resolve module specifier "@lit/reactive-element"

In my html thymeleaf template I have:

<script type="module" th:src="@{/js/simple-greeting.js}"></script>

and in the simple-greeting.js I am referencing the lit framework like:

import {html, css, LitElement} from '/webjars/lit/index.js';

the "simple-greeting.js" is included with my static js. And the Lit dependency is included as a webjar.

I feel like I'm missing something fundamental (hopefully simple) with how the JS frameworks import/export modules. Is there some sort of build process I need to do to leverage the JS framework? (I really hope not)

score 1 · Answer 1 · answered Aug 25 '22 at 12:23

To solve that problem, you’ll need a new tool called import maps.

The following html page should be able to load

<!doctype html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <script type="importmap">
           {
            "imports": {
                "lit": "/webjars/lit/index.js",
                "@lit/reactive-element": "/webjars/lit__reactive-element/reactive-element.js",
                "lit-html": "/webjars/lit-html/lit-html.js",
                "lit-element/lit-element.js": "/webjars/lit-element/lit-element.js"
            }
        }
    </script>
    <script type="module">
        import {LitElement, html, css} from 'lit';
        console.log(LitElement);
    </script>
</head>
<body>
</body>
</html>

score 0 · Answer 2 · answered Apr 03 '23 at 15:52

You can use a CDN to load bundles like Lit instead of using importmaps.

Like so:

import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
class MyElement extends LitElement { /* */ }

Read more about those bundles in https://lit.dev/docs/getting-started/

Trying to add the Lit JS framework to an existing Spring Boot project via Webjar dependency in gradle. Results in:Failed to resolve module specifier

2 Answers2