Components don\'t build properly with PolymerLabs/lit-element...

来自 : CSDN技术社区 发布时间：2021-03-25

私信 访问主页

weixin_39966765 2020-12-02 16:10 首页 开源项目 Components don\'t build properly with PolymerLabs/lit-element-build-rollup

Reproduce:

Clone https://github.com/PolymerLabs/lit-element-build-rollupUpdate lit-element to latest (2.1.0)Build and verify that build works (it does ;))Add a component e.g. npm install /mwc-button import/add in my-element(The element version is 0.5.0)Clean and build

Two things happen:

the build throws an error:

src/index.js → build/index.js...(!) this has been rewritten to undefined https://rollupjs.org/guide/en#error-this-is-undefinednode_modules//mwc-button/mwc-button.js1: var __decorate this this.__decorate || function (decorators, target, key, desc) {2: var c arguments.length,3: r c 3 ? target : desc null ? desc Object.getOwnPropertyDescriptor(target, key) : desc,...and 1 other occurrence

and 2. the app never renders - but throws an error in the console:

util.js:43 Uncaught TypeError: Cannot read property appendChild of null at detectEdgePseudoVarBug (util.js:43) at supportsCssVariables (util.js:76) at ripple-directive.js:26

Using the rollup script from https://open-wc.org/building/building-rollup.html works with the mwc-elements.

Also, other elements done with lit-element work (with the PolymerLabs/lit-element-build-rollup script).

Theory: The TypeScript compiler creates extra boilerplate code for properties that is not compatible with the simple rollup script.

captaincodeman (polymer slack) suggested adding this to the typescript config of the components (I didn t have a chance to try yet):

 noEmitHelpers : true, importHelpers : true,

该提问来源于开源项目 material-components/material-components-web-components

点赞 写回答 收藏 复制链接分享 删除 再等等 结题 再想想 15条回答

私信 访问主页

weixin_39834780 3月前

It seems like there might be a de facto standard of sorts where folks transpile the guts of a module but leave the import/export syntax in place. If I were transpile inert to ES5 but leave the import/export syntax would that negatively affect y all?

It won t break anything in MWC, but it will probably slightly increase bundle size (since transpiled classes are larger), and it makes the code a little less debuggable in the browser. I don t think this module actually has any imports/exports, it s all side-effects. (But if it did, shipping ES5 transpiled code but with module syntax seems pretty odd, because you don t get the benefit of it working out-of-the-box in older browsers, but you also remove the possibility of serving smaller/faster code to modern browsers).

Sounds like this should have been a breaking change (totally my bad too, since we discussed it and I didn t know about this kind of use case), but TBH I don t think the fact that certain webpack configurations expect the module field to contain ES5 code is a compelling reason to shy away from publishing ES2015 to NPM. IMO if a user needs to support older browsers, they should have a build process that transpiles all their code, including dependencies, to ES5.

点赞 评论 复制链接分享

私信 访问主页

weixin_39844549 3月前

btw I think this lead to an issue where folks using webpack were expecting a transpiled version to come through in the module field. https://github.com/WICG/inert/issues/136

It seems like there might be a de facto standard of sorts where folks transpile the guts of a module but leave the import/export syntax in place. If I were transpile inert to ES5 but leave the import/export syntax would that negatively affect y all?

点赞 评论 复制链接分享

私信 访问主页

weixin_39834780 3月前

Thanks for fixing and releasing ! NPM install should already pick up the new version (users may need to delete package-lock.json and node_modules/ first). I also just bumped our own dependency on inert, to ensure the next MWC release will require Rob s fix.

点赞 评论 复制链接分享

私信 访问主页

weixin_39926103 3月前

I can confirm the new wicg-inert version works with Rollup bundling. Thanks .

点赞 评论 复制链接分享

私信 访问主页

weixin_39844549 3月前

I think we re distributed as a UMD module so, AMD if it s available, or CommonJS, else global.

I think the second option of using the module field to point at an ES Module version sounds like a plan.

点赞 评论 复制链接分享

私信 访问主页

weixin_39834780 3月前

I ll re-open this until the wicg-inert issue is fixed and we bump the dependency here.

点赞 评论 复制链接分享

私信 访问主页

weixin_39834780 3月前

I m not sure I understand what is causing the bug. can you explain it to me?

This repo (MWC) uses JavaScript modules, and we import wicg-inert as a JavaScript module (see https://github.com/material-components/material-components-web-components/blob/b1d1640c9c3b27ec0f3c9054c1b2a158f23a891a/packages/drawer/src/mwc-drawer-base.ts#L23).

However wicg-inert is distributed as an AMD module (not a JavaScript module), so it has the standard AMD initialization boilerplate at the top of the file, which includes a reference to a top-level this (see https://unpkg.com/browse/wicg-inert.1.3/dist/inert.js). That this is usually window and AMD uses it to put things into a global namespace.

In JavaScript modules, top-level this is undefined (not window). In general, it doesn t make sense to import an AMD module as though it were a JavaScript module. In the particular case of wicg-inert, the library doesn t export anything, and is only used for its side-effects, so the this is never actually used. But when Rollup processes this import, it still notices this problem and errors.

IMO the solution here is that wicg-inert should either not be compiled to an AMD module at all (especially since it doesn t export anything), or there needs to be a second JavaScript module output, with the package.json module field set to that output (Rollup and other JavaScript-module aware tools will prefer module over main ).

点赞 评论 复制链接分享

私信 访问主页

weixin_39844549 3月前

I m not sure I understand what is causing the bug. can you explain it to me?

点赞 评论 复制链接分享

私信 访问主页

weixin_39926103 3月前

I filed a separate issue against the wicg-inert repo (see above) that appears to be a dependency for certain components. Does it make sense to reopen this issue until the dependency issue is resolved as you ll likely need to update package.json for any affected components?

For example, mwc-drawer won t function within a Rollup bundle until this is resolved.

https://github.com/material-components/material-components-web-components/blob/master/packages/drawer/package.json#L23

点赞 评论 复制链接分享

私信 访问主页

weixin_39834780 3月前

When can we expect NPM component releases including this fix? Thanks!

Just released 0.8.0 with this change in it. Enjoy!

点赞 评论 复制链接分享

私信 访问主页

weixin_39926103 3月前

When can we expect NPM component releases including this fix? Thanks!

点赞 评论 复制链接分享

私信 访问主页

weixin_39834780 3月前

(Copying my comment from #323 here)

We should set importHelpers: true and add a dependency on tslib so that the helpers like __decorate are imported from that module instead of inlined. This should also help code size and performance, since currently every element has its own duplicate of __decorate (and maybe some other helpers), not to mention most typescript users are also going to need this function too.

(This is arguably also a tsc bug, in that when emitting a module, this and var aren t going to set globals, so not only is there a copy of each helper at every call site, there is no runtime de-duplication via globals.)

评论 复制链接分享

私信 访问主页

weixin_39966765 3月前 you are right on the rollup warnings being separate (they also turn up on the open-wc build, I see) 点赞 评论 复制链接分享

私信 访问主页

weixin_39706367 3月前

Just to clear something up ...

I think you have 2 different issues here. The noEmitHelpers and importHelpers prevent the rollup build warnings and also reduce the overall bundle size (decorators imported from tslib instead of repeated in each component).

That s separate to why the app might not be rendering.

点赞 评论 复制链接分享

私信 访问主页

weixin_39966765 3月前

Related to: https://github.com/PolymerLabs/lit-element-build-rollup/issues/6

点赞 评论 复制链接分享 提交 再想想 采纳 为你推荐 错误是值（博客）-逻辑上是相同的吗？ exceptionerror-handlingexception-handling 2个回答如何在Go中使用\'multipart\'设置表单的Content-Type multipartform-data 1个回答PHP DomDocument无法处理utf-8字符（☆） utf-8php 3个回答PHP - 2D数组表格式 htmlhtml-tablearraysphp 2个回答PHP / Wordpress - 将WordPress功能与现有的PHP代码集成在一起 twitterwordpressphp 1个回答禁用Woocommerce中按钮的默认/？add-to-cart =动画 wordpressphp 1个回答Wordpress - CPT - 循环计数项目，用于显示不同的布局 while-loopwordpressphp 3个回答PHP / MySQL - 如何在已经自动生成的表中为一行自动生成删除链接？ htmlmysqlphp 1个回答Laravel 4 - 用户应该只访问多用户数据库中的数据 database-securitylaravelauthenticationphp 2个回答如何在PHP中使用curl -T / - upload-file和POST？ curlfile-uploadphp 1个回答PHP UTF-8编码回应问号 jsonechoutf-8php 2个回答Google Analytics PHP API - 获取用户电子邮件 google-apigoogle-analyticsphp 1个回答PHP / MYSQL-如何使用IN查询 sqlmysqlphp 3个回答PHP / MySQL - 不发布到数据库 mysqlphpunity3d 2个回答PHP / MySQL / AJAX - 更新查询不使用会话变量创建记录 ajaxmysqlphp 1个回答在线服务器上的yii2应用程序：无效参数 - yii \\ base \\ InvalidParamException视图文件不存在 yii2viewphpweb-applications 1个回答MySQL - 编码为charset windows-1251的数据未在服务器上显示 character-encodingdatabaseutf-8phpmysql 1个回答PHP / RegEx - 用于预先添加表名的逻辑 regexphp 3个回答使用PHPMailer的HTML电子邮件中没有很好地显示UTF-8口音 utf-8php 1个回答PHP - number_format和舍入 number-formattingroundingphp 1个回答 点击登录 提问题 欢迎建议意见 . 如何写高质量提问和回答？ 采纳榜7天 被采纳次数 ProfSnail 21 coagenth 16 幻灰龙 164 qq_34124780 145 Jack_Yang(数据分析及可视化) 126 规则边缘 117 GoCityPass新加坡曼谷通票 118 天际的海浪 99 cpp_learner 910 我不喜欢这个世界 9 加急问题 100 unity 设置Animation的culling type 导致游戏崩溃 75 数据库只有myd文件没有frm,myi文件，怎么打开呢 55 微服务框架，springboot启动异常 51 利用Adams联合matlab仿真求运动学反解问题 50 labview使用datasocket与c/c#程序的通信 50 已知地图GPS坐标点A和坐标点B，获取A点往B点直线走一定距离的坐标点经纬度？ 50 在不import任何东西并且限制交换次数的情况下做HeapSort和MergeSort？