rollup.JS and "'this' keyword is equivalent to 'undefined'

Question

I'm trying to bundle Angular2 modules using Rollup.js. this is my rollup.config.vendor.js file:

import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: 'vendor.ts',
    dest: './Bundle/vendor.js',
    format: 'iife',
    moduleName: 'vendor',
    plugins: [
        typescript(),
        resolve({
            jsnext: true,
            main: true,
            browser: true
        }),
        commonjs({
            include: 'node_modules/rxjs/**',
        }),
    ]
}

It creates a bundled js, but in the process it keeps printing this kind of message:

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
node_modules\@angular\forms\@angular\forms.es5.js (1:25)
1: var __extends = (this && this.__extends) || function (d, b) {
                            ^
2:     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
3:     function __() { this.constructor = d; }

What does it mean?
Am I doing something wrong or is it the way it's supposed to be?

Answer 1

You could safely ignore those warnings as explained in the documentation by adding the onwarn property to your rollup-config.js file:

onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
}

Quote:

It overrides the default onwarn method in order to skip annoying messages about the AOT compiler's use of the this keyword.

Answer 2

You could use the context option and set it to this: it avoids the rewrite of this to undefined (in fact this is rewritten to... this).

See Rollup documentation:

• https://rollupjs.org/guide/en/#error-this-is-undefined
• https://rollupjs.org/guide/en/#context

Answer 3

The reason this is happening is that typescript will attempt to shim out await if the language target is too low, and typescript's await shim leans on global this. The warning is triggered by the use of global this, which it can't prove was safely stubbed out (but was.)

Whereas you can cause the error message to be omitted, since you're bundling, the better choice is to use a language target that presumes await.

In your tsconfig.json, set target to es2017 or higher, and this will go away.