I would like to bundle a .js file with rollup that has only a class definition in it. But rollup creates only an empty bundle-file. This changes when I add some code outside the class Definition. This creates an empty bundle:

class MyElement extends HTMLElement{
    constructor() {...}
    ...
}

And this creates a filled bundle:

class MyElement extends HTMLElement{
    constructor() {...}
    ...
}

customElements.define('my-element', MyElement);

But I don't want to have the ...define() in that file. Is there a way to convice rollup.js to just bundle the class-definition?

I would like to bundle a .js file with rollup that has only a class definition in it. But rollup creates only an empty bundle-file. This changes when I add some code outside the class Definition. This creates an empty bundle:

class MyElement extends HTMLElement{
    constructor() {...}
    ...
}

And this creates a filled bundle:

class MyElement extends HTMLElement{
    constructor() {...}
    ...
}

customElements.define('my-element', MyElement);

But I don't want to have the ...define() in that file. Is there a way to convice rollup.js to just bundle the class-definition?

• javascript
• ecmascript-6
• rollup

• make sure you export your ponent – Amir Rezvani Commented Jan 19, 2024 at 20:35

2 Answers 2

Old topic but can be useful for those who are researching: for me it worked:

change the file tsconfig.json

  "emitDeclarationOnly": false,

You have a module that defines a class in its local scope but doesn't do anything with it - neither export it nor use it to perform a side effect like passing it to define. It's dead code - and that will be stripped by rollup. You'll likely want to use

export default class MyElement extends HTMLElement { /*
^^^^^^^^^^^^^^ */
    constructor() { … }
    …
}

which can be bundled to something that still exports the class so that it is usable elsewhere.