Hyperhtml: `this` has been rewritten to `undefined`

[cousquer]

Ciao Andrea,

I first wanted to thank you for hyperHTML (which I have been using since the very beginning in 2016). Your work is so stratospheric 🚀 🚀 ... Many, many thanks. 🙇
I always managed on my own, as soon as I had a little trouble. But here I am stuck. I really do not know if it's a bug on my side, on the hyperHTML side, or on the babel-minify/rollup side.

the bug(?)

on the project : https://github.com/cousquer/CardWebComponents
see it live working [hyperHTML 2.16.0]: https://cousquer.github.io/CardWebComponents/
When I update hyperHTML in package.json hyperHTML from version 2.16.0 to 2.16.1, my build flags me:
:triangular_flag_on_post:

src/my-card.js → dist/my-card.esm.js, dist/my-card.umd.js, dist/my-card.cjs.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules\@ungap\essential-weakset\esm\index.js
1: /*! (c) Andrea Giammarchi - ISC */
2: var self = this ||
              ^
3: /* istanbul ignore next */
4: {};
node_modules\@ungap\weakmap\esm\index.js
1: /*! (c) Andrea Giammarchi - ISC */
2: var self = this ||
              ^
3: /* istanbul ignore next */
4: {};
node_modules\@ungap\custom-event\esm\index.js
1: /*! (c) Andrea Giammarchi - ISC */
2: var self = this ||
              ^
3: /* istanbul ignore next */
4: {};
node_modules\@ungap\essential-map\esm\index.js
1: /*! (c) Andrea Giammarchi - ISC */
2: var self = this ||
              ^
3: /* istanbul ignore next */
4: {};
[!] (babel-minify plugin) Error: Error transforming bundle with 'babel-minify' plugin: don't know how to turn this value into                                                                                                               a node
Error: Error transforming bundle with 'babel-minify' plugin: don't know how to turn this value into a node
    at Object.valueToNode (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\t                                                                                                              ypes\lib\converters\valueToNode.js:103:9)
    at PluginPass.Expression (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\babel-plugin-minify-constant-f                                                                                                              olding\lib\index.js:195:26)
    at PluginPass.newFn (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\tra                                                                                                              verse\lib\visitors.js:230:17)
    at newFn (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\traverse\lib\v                                                                                                              isitors.js:193:21)
    at NodePath._call (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\trave                                                                                                              rse\lib\path\context.js:53:20)
    at NodePath.call (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\traver                                                                                                              se\lib\path\context.js:40:17)
    at NodePath.visit (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\trave                                                                                                              rse\lib\path\context.js:88:12)
    at TraversalContext.visitQueue (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules                                                                                                              \@babel\traverse\lib\context.js:118:16)
    at TraversalContext.visitSingle (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_module                                                                                                              s\@babel\traverse\lib\context.js:90:19)
    at TraversalContext.visit (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@bab                                                                                                              el\traverse\lib\context.js:146:19)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @uportal/[email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @uportal/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Cousquer\AppData\Roaming\npm-cache\_logs\2018-12-03T15_27_52_644Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @uportal/[email protected] prestart: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @uportal/[email protected] prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Cousquer\AppData\Roaming\npm-cache\_logs\2018-12-03T15_27_52_676Z-debug.log

I do not understand anything about the error messages about istanbul???
I really don't know if it is on my side or on hyperHTML side?

[WebReflection]

Hello there 👋

The technique used in the entirety of the ungap project is to create 100% cross environment modules, being this ESM, CJS, Workers, or plain HTML pages.

Almost every module starts like this:

var self = this || /* istanbul ignore next */ {};

What does it mean ?

• if it's a real ES module, the this would be undefined, hence the module is represented by an empty object that will be exported via export default self.moduleName at the end.
• if it's CommonJS, the this is the module itself already, so that the next statement will never happen, which is why there is an Istanbul directive to ignore it, otherwise it messes up with the coverage result. In this case, the module will be later on exported as module.exports = self.moduleName;
• if it's wither a Worker or a HTML page, the self, which points already to the global context, will be assigned to the global context itself via self = this and the following object won't ever be created.

The main, and only, gotcha with rollup is that it doesn't understand what's going on so that anything assigned to this in a pseudo ESM/wannabe environment, should be converted into undefined.

My solution

In hyperHTML rollup config, I've specified both context: 'null' and moduleContext: 'null' so that the warning goes away, and no extra plugin should complain about a thing.

Does this solve your issue too?

[cousquer]

Hello Andrea,

many many Thanks! 💯 You rock! 🙇 😎

Additional Context

and no extra plugin should complain about a thing.

_babel-minify was still flagging even with context: null and was in neverLand..._

[!] (babel-minify plugin) Error: Error transforming bundle with 'babel-minify' plugin: don't know how to turn this value into a node
Error: Error transforming bundle with 'babel-minify' plugin: don't know how to turn this value into a node
    at Object.valueToNode (C:\Users\Cousquer\Documents\GitHub\CardWebComponents\node_modules\@babel\core\node_modules\@babel\types\lib\converters\valueToNode.js:103:9)

Resolution
"Et hop là!" => removed 34 packages in 3.477s

Many Thanks