Stimulus: Using with Rollup gives warnings

Created on 21 Sep 2019  路  1Comment  路  Source: hotwired/stimulus

Using it with Rollup I'm receiving 4 warnings:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules\@stimulus\core\dist\src\application.js
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
2:     return new (P || (P = Promise))(function (resolve, reject) {
3:         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
...and 3 other occurrences
node_modules\@stimulus\core\dist\src\definition.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = Object.setPrototypeOf ||
3:         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
...and 1 other occurrence
node_modules\@stimulus\multimap\dist\src\indexed_multimap.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = Object.setPrototypeOf ||
3:         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
...and 1 other occurrence

I'm using this rollup.config.js:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import stimulus from 'rollup-plugin-stimulus'

export default {
  input: 'root.js',
  output: {
    format: 'esm',
    dir: 'dist/js'
  },
  plugins: [
    stimulus(),
    resolve({
      browser: true
    }),
    commonjs()
  ]
}

Most helpful comment

Hey @frederikhors, I think adding context: 'window', to your Rollup config should resolve these warnings for you.

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import stimulus from 'rollup-plugin-stimulus'

export default {
  input: 'root.js',
  context: 'window',
  ...
}

When TypeScript compiles Stimulus it looks to be generating helper functions to support async/await syntax. These functions are attached to the top-level 'this'. Since 'this' can be undefined in an ES module Rollup generates a warning.

This option tells Rollup that you expect the code to be run in the browser so it can assume that the top-level 'this' refers to the 'window' object. That way Rollup can know that accessing 'this' is safe.

>All comments

Hey @frederikhors, I think adding context: 'window', to your Rollup config should resolve these warnings for you.

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import stimulus from 'rollup-plugin-stimulus'

export default {
  input: 'root.js',
  context: 'window',
  ...
}

When TypeScript compiles Stimulus it looks to be generating helper functions to support async/await syntax. These functions are attached to the top-level 'this'. Since 'this' can be undefined in an ES module Rollup generates a warning.

This option tells Rollup that you expect the code to be run in the browser so it can assume that the top-level 'this' refers to the 'window' object. That way Rollup can know that accessing 'this' is safe.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jenkijo picture jenkijo  路  3Comments

dwightwatson picture dwightwatson  路  3Comments

thooams picture thooams  路  4Comments

merwok picture merwok  路  4Comments

saneef picture saneef  路  4Comments