相对引用必须以“/”、“./”或“../”开头答案

【问题标题】：Relative references must start with either "/", "./", or "../"相对引用必须以“/”、“./”或“../”开头
【发布时间】：2019-06-08 14:51:51
【问题描述】：

我是 lit-element 的新手，当使用 import 包含库时，我收到错误：

未捕获的类型错误：无法解析模块说明符“lit-element”。相对引用必须以“/”、“./”或“../”开头。

请提供任何替代方案/解决方案。

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render(){
    return html`
      <div>
        <p>A paragraph</p>
      </div>
    `;
  }
}
customElements.define('my-element', MyElement);

【问题讨论】：

建议的简单 Linux 路径 ./ current dir; /根目录； ../ 父目录。从错误看来，它应该与项目中 lit-element 的相对路径或 Web 源（？）的 URL 一起使用。
这意味着'lit-element'需要是一个相对路径例如'../lit-element'

标签： javascript lit-element polymer-3.x lit-html

【解决方案1】：

这不起作用，因为 js 导入必须引用具有相对路径或绝对路径的特定文件，假设您的项目结构如下所示：

/node_modules
  /lit-element
  /other-library
/src
  /components
    my-element.js
index.html

来自my-element.js，您的导入将是

import {LitElement, html} from '../../node_modules/lit-element/lit-element.js'

但是，由于这种配置令人困惑，并且您可能最终也会在某个时候设置构建脚本，因此建议您将导入保持原样并使用开发服务器将您的导入重新映射到 @ 987654326@点赞open-wc's web server

更新（2021 年 2 月）：此问题中提到的 Web 服务器已经经历了一些迭代和改进。当前包是@web/dev-server

【讨论】：

【解决方案2】：

您可以使用 polimer-cli 提供裸模块导入。

一个。安装它：npm install --save-dev polymer-cli

b.在你的项目中创建polymer.json，内容大致如下：

{
    "entrypoint": "index.html",
    "shell": "app.js",
    "npm": true
}

c。做polymer serve

【讨论】：