`this` has been rewritten to `undefined`

cousquer commented 5 years ago

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/card-components@0.1.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @uportal/card-components@0.1.0 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/card-components@0.1.0 prestart: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @uportal/card-components@0.1.0 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 commented 5 years ago

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 commented 5 years ago

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

remove

Many Thanks

thanks

WebReflection / hyperHTML