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()
]
}
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.
Most helpful comment
Hey @frederikhors, I think adding
context: 'window',to your Rollup config should resolve these warnings for you.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.