How to solve the lit build-in directives import error?

Using lit 2.5.0 in combination with vite I run into an issue using the lit build-in directives. Following the docs I added an import to my lit js component like:

import { when } from 'lit/directives/when';

But when I view the resulting site in the browser I always get a missing package error:

Missing "./directives/when" export in "lit" package

Any suggestions on how to fix this import issue?

Solution

You need to include the .js extension as well.

import { when } from 'lit/directives/when.js';

This is needed because that's how it's listed in the "exports" of the package which you can see in the package.json file. https://unpkg.com/lit@2.5.0/package.json

    "./directives/when.js": {
      "types": "./development/directives/when.d.ts",
      "default": "./directives/when.js"
    },

Rationale for this is to encourage usage of file extensions in import specifiers so as to not require bloated import maps in the browser to support extensionless imports. Described more in detail https://lit.dev/docs/tools/publishing/#include-file-extensions-in-import-specifiers and https://github.com/WICG/import-maps#extension-less-imports.