类型错误：模块名称，“lit”无法解析为有效的 URL

问题描述 投票：0回答：1

我是第一次尝试 WebComponents，并尝试使用 lit。一直显示这个错误

我的 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <script type="module" src="app.js"></script>
  <title>Document</title>
</head>
<body>
  <payment-sdk></payment-sdk>
</body>
</html>

import {LitElement, html, css} from 'lit';

我尝试从 HTML 中删除 module 属性，但仍然不起作用。它现在给出了错误

javascript es6 import "expects exactly one argument"

我也在考虑使用 Babel 来编译它，但我认为它不会起作用，因为我仍然遇到错误 我还在我的包中添加了

"type": "module"
，json文件

javascript web-component lit
1个回答
0
投票

您正在使用 ESM 来实现您的依赖 

lit
。当您以这种方式使用 ESM 时，您应该为导入提供绝对路径。

因此，您应该指定它的绝对 URL，而不是简单地执行 

import {} from "lit"
，例如 
import {} from "../../node_modules/lit.index.js"
（或任何正确的路径）

如果您自己没有 

lit
的 ESM 副本，您也可以使用 
esm.sh
等 ESM CDN。要使用它们，请将以下脚本标签添加为 head 标签的第一个子标签

<script type="importmap">
  {
    "imports": {
      "lit": "https://esm.sh/[email protected]",
    }
  }
</script>

在这里，我们告诉浏览器从我们映射到的 URL 加载 

lit

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.