Rollup warning: `this` has been rewritten to `undefined`

See original GitHub issue

Hello! I’ve recently been experimenting with different alternatives to use web components and I found catalyst, which I’ve loved! I tried adding @github/jtml to a component I’m making and I’m getting the following warning when bundling with Rollup:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
../../node_modules/.pnpm/@github+template-parts@0.3.3/node_modules/@github/template-parts/lib/attribute-template-part.js
1: var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
                                 ^
2:     if (kind === "m") throw new TypeError("Private method is not writable");
3:     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
...and 3 other occurrences
../../node_modules/.pnpm/@github+template-parts@0.3.3/node_modules/@github/template-parts/lib/template-instance.js
1: var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
                                 ^
2:     if (kind === "m") throw new TypeError("Private method is not writable");
3:     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
...and 3 other occurrences
../../node_modules/.pnpm/@github+template-parts@0.3.3/node_modules/@github/template-parts/lib/node-template-part.js
1: var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
                                 ^
2:     if (kind === "m") throw new TypeError("Private method is not writable");
3:     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
...and 3 other occurrences

From reading the link on the message and seeing the error message contents, this seems to be intentional on your side, so this might just need to be documented? Setting context to window removes the warning and doesn’t seem to break anything, but I’m not sure if this would be the proper approach.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
keithamuscommented, Mar 14, 2022

@pablo-abc I’ve raised #54 which I think should address this.

0reactions
pablo-abccommented, Mar 14, 2022

Sure, that works! But in the end the final decision should be made by you (as a maintainer) due to the following:

  1. Private fields are a nice feature to have for DX, this would mean giving that up.
  2. While this would solve this issue right now, it wouldn’t prevent this (or similar issues) from appearing again. E.g. by using other “ESNext” feature for which tsc does something similar.
  3. Adding to the previous point, it could add a burden to maintainers and contributors as you’d need to check the compiled output for top-level this when changing the code.

These concerns might not be an issue at all seeing as this is not a large package and movement looks slow and controlled. Using WeakMap instead of private fields would help keep the build process simple, as well. Another benefit of using WeakMap is that the output would be even smaller.

Read more comments on GitHub >

github_iconTop Results From Across the Web

unexpected result after a rollup task: `this` keyword has been ...
I think it shall be generated as it, so that it will be undefined for ES module and will take it meaning as...
Read more >
rollup.JS and "'this' keyword is equivalent to 'undefined'
The reason this is happening is that typescript will attempt to shim out await if the language target is too low, and typescript...
Read more >
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
This week, we're going to build our first project using Rollup, which is a build tool for bundling JavaScript (and stylesheets, but we'll...
Read more >
rollup.js
Export a value that has been previously declared: ... ES modules export live bindings, not values, so values can be changed after they...
Read more >
Rollup FAQ | Wener Live & Life
this has been rewritten to undefined ​ · Rollup requires that your Babel configuration keeps ES6 module syntax intact.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found