问题
我正在关注“使用 App Toolbox 构建应用程序”教程。我遇到了第 3 步“添加一些元素”的问题,一旦我尝试添加paper-checkbox
元素,视图就不会显示。
经过一些试验和错误,我发现node_modules
文件夹中有一个额外的文件paper-checkbox
夹。这导致视图中断,因此不显示(更多内容见下文)。为什么会发生这种情况,如何解决?
教程链接
https://www.polymer-project.org/3.0/start/toolbox/add-elements
完整的问题详细信息
我使用命令行界面启动项目,按照教程说明运行polymer init
并选择。polymer-3-starter-kit
我运行以下命令进行安装paper-checkbox
:
npm install @polymer/paper-checkbox
请注意,我在安装元素后收到以下警告:
npm WARN @babel/plugin-transform-classes@7.0.0-beta.35 requires a peer of @babel/core@7.0.0-beta.35 but none is installed. You must install peer dependencies yourself.
+ @polymer/paper-checkbox@3.0.0-pre.20
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details
我检查了我的node_modules
文件夹,我可以看到它paper-checkbox
已安装。
到目前为止,当我加载my-new-view
它时显示正确,如下所示:
my-new-view.js
但是,当我在paper-checkbox
元素
内部添加 import 语句时,import '@polymer/paper-checkbox/paper-checkbox.js';
视图无法显示:
在与另一个项目进行一些代码比较后,我看到paper-checkbox
文件夹不匹配(见下面的截图)。它包含一个重复的node_modules
文件夹,其中包含一个重复的@polymer
文件夹。该聚合物文件夹包含font-robota
和其他已包含在顶级聚合物目录中的模块;甚至更多重复的内容。
此外,在检查网页时,控制台(在 chrome 上)给出以下错误:
Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Polymer (http://127.0.0.1:8081/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js:43:18)
at http://127.0.0.1:8081/node_modules/@polymer/paper-checkbox/node_modules/@polymer/iron-meta/iron-meta.js:141:1
由于存在重复内容,因此会发生此错误。为了解决这个问题,我只是删除node_modules
了复选框元素中的文件夹。
我也尝试安装paper-input
。paper-input
需要iron-input
. 运行npm install @polymer/paper-input
相同的node_modules
文件夹后,铁和纸输入元素中都安装了。我删除了这两个文件夹,然后该元素终于起作用了。
为什么 npm 会这样做?我该如何解决?
Github 项目回购
https://github.com/starkindustries/my-first-polymer-app
版本信息
- Git 版本 2.17.1 (Apple Git-112)
- NPM 版本 6.4.1
- 节点版本 v10.10.0
- 聚合物 CLI 版本 1.8.0
- Chrome 版本 69.0.3497.100(官方版本)(64 位)