问题标签 [stenciljs]

对于我正在处理的 typescript stenciljs 项目，我在依赖项之间的交互rollup-plugin-node-builtins以及node-gyp-build在依赖项中使用的交互方面遇到了问题。为了解决它，我能够对汇总插件进行一些更改并将其设置为模板中的自定义纱线分辨率

当我在本地运行它时效果很好，但是我们的构建过程在执行时没有可用的 gityarn install所以我们尝试将分辨率设置为.tar.gz插件的版本：

这似乎正确地将代码克隆到 node_modules 中：

但是当我尝试构建代码时，我得到了这个输出：

是否有使用压缩档案进行纱线分辨率的特殊过程？

编辑

这是我的 yarn.lock 对于这个依赖项的样子：

纱线版本：

所以我试图将第三方 npm 模块“rss-parser”导入我的 Stenciljs 项目。我在官方文档中尝试过：

我得到了错误：Can't find variable: require。

我想我以某种方式错过了如何安装这些库，但我不知道如何安装。我对 moudle bundlers 很感兴趣，但我认为 Stenciljs 编译器已经自带了。

我试图在 ES6 项目中导入旧的 JS 代码是否有问题？

谢谢你的帮助

我正在尝试从包含 stencilJS 组件的网站应用样式......但不知道如何。

该组件包含如下：

在我的 main.css 文件中，我有这样的东西：

我希望将样式应用于模板组件中的元素。这可能吗？

我正在使用 stencilJS 开发一个 Web 组件。我正在使用一个插槽来呈现 HTML，但我需要在呈现 HTML 之前对其进行修改，为此，我使用 querySelector 和 appendChild 函数来操作 DOM。这在 Chrome 上运行良好，但在 IE 和 Edge 上引发层次结构错误。这是我的代码：

TSX 中的渲染函数：

操作 DOM 的代码：

上面的代码在 chrome 上完美运行，但在 IE 中抛出错误就行了

我想在我的项目中使用一个stencil库。nuxt

我能够让它工作，但是当vue组件在服务器端呈现时，我只能让stencil's 组件在客户端呈现。

我认为最大的问题是defineCustomElement需要window作为参数。

我知道stencil.js有那个“prerender”，在我的理解中基本上是 SSR，我想和Nuxt.jsSSR 一样使用它。

所以我的问题是：如何配置nuxt项目以支持服务器端渲染stencil.js？

当我为组件运行单元测试时出现错误 1) TestWindow 不是构造函数 2) 无法读取未定义的属性“textContent” 无法理解如何进一步进行。当我尝试控制台元素和 testWindow 时，两者都未定义。

package.json "devDependencies": { "@stencil/core": "~0.16.4", "@stencil/sass": "^0.1.1", "@types/jest": "23.3.11", " @types/puppeteer”：“1.6.4”，“jest”：“^23.6.0”，“jest-cli”：“23.6.0”，“puppeteer”：“1.8.0”，“workbox-build” : "3.4.1" } 我怎样才能摆脱这些错误，或者我错过了一些要包括的东西。

如何检查 Stencil 测试中哪个元素具有焦点？我不能document.activeElement像往常一样使用，因为它总是返回undefined......

我有一个带有单元和 e2e 测试的 stenciljs 项目，可以在本地完美运行，但在服务器上失败并出现给定错误：

启动 chrome 失败！spawn /builds/header/node_modules/puppeteer/.local-chromium/linux-588429/chrome-linux/chrome ENOENT 疑难解答： https ://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md 错误：启动 chrome 失败！spawn /builds/header/node_modules/puppeteer/.local-chromium/linux-588429/chrome-linux/chrome ENOENT 疑难解答： https ://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md 在 onClose (/builds/header/node_modules/puppeteer/lib/Launcher.js:333:14) 在 ChildProcess.helper.addEventListener.error (/builds/header/node_modules/puppeteer/lib/Launcher.js:324:64)在 ChildProcess.emit (events.js:182:13) 在 Process.ChildProcess._handle.onexit (internal/child_process.js:238:12) 在 onErrorNT (internal/child_process.js:407:16) 在 process._tickCallback (内部/进程/next_tick.js:63:19)

包.json：

正在使用 gitlab runner 运行构建，当我搜索解决方案时，我发现 puppeteer (v1.8.0) 的较新版本是有这个问题的，所以我在我的 package.josn 中将它修复为 1.7.0但它在测试执行期间正在更新：

模板测试--e2e

[28:43.7] 正在更新所需的依赖项，请稍候。这可能需要一些时间，并且仅在初始运行时需要。[28:43.7] 安装依赖项：jest-cli、@types/puppeteer、jest、puppeteer ... npm WARN 已弃用 kleur@2.0.2：如果您愿意，请升级到 kleur@3 或迁移到“ansi-colors”旧语法。访问https://github.com/lukeed/kleur/releases/tag/v3.0.0\了解迁移路径。

puppeteer@1.8.0 install /builds/header/node_modules/puppeteer node install.js

Chromium 下载到 /builds/header/node_modules/puppeteer/.local-chromium/linux-588429

• 开玩笑@23.6.0
• jest-cli@23.6.0
• puppeteer@1.8.0
• @types/puppeteer@1.11.2 添加了 1 个包，删除了 17 个包，更新了 23 个包并在 50.353 秒内移动了 23 个包 [29:34.7] 安装依赖项在 51.00 秒内完成

How Can I pass @Prop() as function that toggle events for the component in Stencil.js ?

and place it in

我正在尝试将我的 Angular 7 项目与 StencilJS 集成，以便我可以使用自定义 Web 组件/元素，并且我正在遵循 StencilJS 网站上的集成指南。

我的指示说：

使用 Stencil 构建的组件集合包含一个 main 函数，用于加载集合中的组件。该函数被调用defineCustomElements()，并且需要在应用程序的引导期间调用一次。这样做的一个方便的地方是main.ts：

我尝试defineCustomElements()在我的main.ts文件中导入如下：

但我收到以下错误：

我必须使用安装这个模块npm install吗？

如果是这样，为什么该指南不包含该说明？