如何解决Lit内置指令导入错误（Lit 2.5.0 + Vite环境）

• 核心问题：when是Lit 2.6.0才新增的内置指令，你的项目使用的2.5.0版本根本没有这个导出，所以会触发缺失包错误。

解决方案1：升级Lit版本 #

直接把Lit升级到2.6.0及以上版本，执行对应包管理工具的命令：

# npm
npm install lit@^2.6.0

# yarn
yarn add lit@^2.6.0

# pnpm
pnpm add lit@^2.6.0

升级完成后重启开发服务器，原有的导入语句就能正常工作。

解决方案2：不升级版本，用替代方案实现相同逻辑 #

如果暂时无法升级Lit，可以用现有语法或自定义函数替代：

方法A：自定义极简版when函数

import { html } from 'lit';

// 实现类似官方when的逻辑
const when = (condition, trueTemplate, falseTemplate = html``) => {
  return condition ? trueTemplate : falseTemplate;
};

// 使用示例
html`
  ${when(isUserLoggedIn, 
    html`<span>欢迎回来！</span>`, 
    html`<button>立即登录</button>`
  )}
`;

方法B：直接用模板字面量的条件判断

html`
  ${isUserLoggedIn ? html`<span>欢迎回来！</span>` : html`<button>立即登录</button>`}
`;

内容的提问来源于stack exchange，提问作者Alex Jongman