Tengo un error que no puedo solucionar.

Mi código:

 export class Excel { constructor(selector, options) { this.$el = document.querySelector(selector) this.components = options.components || [] } getRoot() { const $root = document.createElement('div') this.components.forEach(Component => { const component = new Component() $root.insertAdjacentHTML('beforeend', component.toHTML()) }) return $root } render() { this.$el.append(this.getRoot()) } }

Ese es mi código de componente y este es mi punto de entrada:

 import {Excel} from './components/excel/Excel' import {Header} from './components/header/Header' import {Toolbar} from './components/toolbar/Toolbar' import {Formula} from './components/formula/Formula' import {Table} from './components/table/Table' import './scss/index.scss' const excel = new Excel('#app', { components: [Header, Toolbar, Formula, Table] }) excel.render()

Quiero editar dinámicamente mi página pero recibo un error:

TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'componentes')