问题标签 [polymer-3.x]

我正在尝试使用聚合物调制器将 Polymer 2 项目转换为 Polymer 3，但出现内存不足的错误。我需要做什么才能继续前进？

我在终端运行了这个命令：

我收到了一个错误，其中包括以下内容

（平均 mu = 0.061，当前 mu = 0.024）分配失败

...

...接近堆限制分配失败 - JavaScript 堆内存不足

这是完整的日志和堆栈跟踪。

我注意到 Polymer 3 中有一个语法上奇怪的函数/运算符，其中的代码html`<br/>`乍一看似乎是错字，但是当它播放时，它可以工作......

我的猜测告诉我，它可能会进入新的 JavaScript 速记或其他箭头兄弟的领域，但我还没有弄清楚/发现它。

调试器显示它是一个函数：

但是，当我想介入它时，我只会看到一条评论。

这是什么奇怪的东西？又该如何定义呢？

我尝试了以下终端命令：

然后得到以下错误：

该错误消息中的关键语句是

npm WARN paper-input@3.0.2 需要一个 react@>= 15.0.0 但没有安装。您必须自己安装对等依赖项。

此外，它似乎将回购存入

node_modules > 纸张输入（如 2.x 元素）

代替：

node_modules > @polymer > paper-input（就像 3.x 元素一样）

这里发生了什么？我要做的就是安装paper-input.

我是 Polymer 的新手，并开始使用名为 Polymer 3 - Code like a Google developer 的课程来学习它。

我想调用函数：addContactClick()从子组件：side-menu。

为此，我将函数作为参数传递。我在 中定义了它side-menu并使用它调用它on-click

开始-polymer3.js：

侧面菜单.js：

当我执行它时，我收到以下错误：listener method addContactClick not defined handler @ template-stamp.js:92

我不认为这是一个重复的问题。我只将@polymer/polymer 作为依赖项安装并导入到我的供应商包中（没有@polymer/paper-input）。我正在使用 v3.0.5，我什至没有在依赖树中看到 iron-meta（通过 npm 列表），而且我的堆栈跟踪看起来不同 - 它指向 polymer/lib/elements/dom-module.js

dom-module.js:178 未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：此名称已用于此注册表

跟踪指向这条线customElements.define('dom-module', DomModule);

在@polymer/polymer/lib/elements/dom-module.js?:178:16

我正在尝试设置一个基本的 Polymer 3 项目。我正在使用带有 babel-loader 的 Webpack 来编译到 es5。因为我正在编译到 es5，所以我将custom-elements-es5-adapter.js按照webcomponentsjs repowebcomponents-bundle.js上的说明包括在内。这些脚本只是从 node_modules 复制到输出目录，并且脚本标签包含在 html 头中。

至于我的组件代码，我正在为每个聚合物组件创建单独的 js 块，并为当前仅包含 Polymer 的共享导入创建单独的块。编译和代码拆分工作没有错误，生成的块被添加到结束 body 标记之前的 html 中。

Webpack SplitChunks 插件将@polymer/polymer导入拉到单独的块中，以便它们只包含一次。

目标是将所有必需的供应商代码提取到一个通用脚本中，并且每个组件都在它自己的一小部分中，可以有选择地包含在内。

• my-common.js（共享/公共块）
• my-button.js（组件块）
• my-tabs.js（组件块）
• ...更多组件块

使用我当前的设置，这些块似乎已正确创建。

理论上，根据我到目前为止所读到的内容，这应该可以工作，但我完全陷入了这个错误。

如果我将组件文件捆绑在一起，一切正常。

这是我的一个非常简单的组件文件的示例：

这是我为这个概念验证创建的 webpack 配置：

这是html：

Polymer 3 使用 import 来加载外部 Javascript。例如

但是，这似乎可行，外部库应该使用导出。

我正在尝试使用 mapbox-gl.js 库。这个库，安装有：

似乎没有出口任何东西。

在 HTML5 中，您可以使用 mapbox-gl，如下所示：

我尝试使用“导入”来加载 mapbox-gl：

这不起作用：

所以，然后我尝试从模块javascript ( )中将脚本和 css 添加到 document.head <script type="module">..</script>：

这似乎也不起作用。如果我尝试按如下方式使用 mapbox：

我正进入（状态：

编辑：

评论者@Salketer 和@barbsan 为这种库显示了正确的导入语法：

或者

现在两者都导致以下错误消息：

这意味着 mapbox-gl 库现在被加载和解释。但是，mapbox-gl 代码包含以下行：

ES6-module 范围无权访问浏览器的“窗口”对象，因此代码失败。另请参阅是否存在等效于“window”的 es6 模块范围？.

现在，我将 HTML5 <script></script> 和 <link /> 标签（见上文）添加到我的项目的 index.html 中。这可行，但组件和模块的想法是从这些组件和模块内部加载依赖项？

我希望在加载聚合物 3 中的视图时淡入 div 元素。我尝试通过在 div 中添加一个 opacity: 0 的 css 类来解决这个问题。聚合物模板准备好后，应删除 css 类并开始 css 转换（在 2 秒内将不透明度转换为 0），但不执行转换，仅在加载页面时 div 可见。

聚合物应用程序正在使用 redux 来存储应用程序的状态。这个想法是将所有路由也存储在状态中（见下图）。我想为此使用redux-router，但是当我尝试将库导入我的应用程序时，我一开始就开始面临问题。

我的导入代码如下所示：

我通过此导入得到的错误是：

意外令牌 =

如果我尝试像这样导入：

我得到：

未捕获的语法错误：请求的模块“../../node_modules/redux-router/lib/index.js”不提供名为“ReduxRouter”的导出

而如果：

然后：

未捕获的 SyntaxError：意外的令牌导出

该问题可以在起始聚合物 3 应用程序中重现。或者，我认为，在任何聚合物应用程序中。

所以：

1. 什么是正确的导入方式？
2. 如果我只需要在状态中存储所有路由和历史记录，我可以在聚合物应用程序中使用 redux-router（没有反应）吗？
3. 我还有什么其他选择。你知道有什么好的图书馆吗？

我在将 LitElement 模块导入 Meteor 项目时遇到问题：

我正在使用 Meteor 1.7+ 开始一个新的测试项目，并且正在将 LitElement 用于一些组件。

我像这样安装了 Meteor：

我是这样安装的：

我的 node_modules 目录如下所示：

我的 package.json 文件：

我看到导入的 lit-element 的典型方式不起作用......

只需添加一个 index.js 文件并导入 lit-element 模块就会产生错误。如果我从 index.js 文件中删除导入，错误就会消失。

第一个错误：

指向此位置：

展开 node_modules 以查看此文件：

为什么我会收到意外的 { 令牌？

注意：我在这里问这个问题，以防万一 Meteor 用户遇到同样的问题并需要帮助。

使用这样的表单时注意到一个问题：

我得到一个表单，其中禁用了默认情况下在简单输入表单中启用的选项卡箭头（请参见下面的屏幕截图）。

问题是：有没有办法让他们工作？

我试过了：

• 表索引
• 将其包装在标签中
• 删除所有图标标签
• 标签中的纸张输入

截图：