Как найти и устранить ошибку рендеринга компонента?

Question

[Андрей Титов]

Переход по ссылкам происходит, роутинг срабатывает судя по смене адресной строки, но сами компоненты не отображаются. В теге, где должен выводится компонент пишет 'undefined'. В консоли ошибка 'Uncaught (in promise) TypeError: c.render is not a function'

В чём может быть несоответствие с кодом по видео?

Делал по этому видео - https://www.youtube.com/watch?v=HgTH05FwodM



Код здесь - https://github.com/titov-andrei/native-framework

Answer 1

[Дмитрий Еремин]

хорошо бы ваш код увидеть
пока, наугад, предположу, что у компонента, котрый вы ждете не определен selector

Comments

[Андрей Титов]

Дмитрий Еремин - Код здесь - https://github.com/titov-andrei/native-framework
Если можно, посмотрите код - селекторы определял вроде в компонентах

Answer 2

[Петр Мухуров]

module.js
import { render } from './component'
component.js

export class Component {
  constructor(config) {
    this.template = config.template
    this.selector = config.selector
    this.el = null
  }
  render() {
    this.el = document.querySelector(this.selector)
    if (!this.el) throw new Error(`Component with selector <${this.selector}> wasn't found`)
    this.el.innerHTML = this.template
  }
}

Comments

[Андрей Титов]

Петр Мухуров - вроде в коде всё так, как вы написали. Или на что обратить внимание - подскажите.

[Петр Мухуров]

Андрей Титов, ну да, код я скопировал, я думал, очевидно же) В module вы делаете import { render }, но в component у вас нет экспорта

[Андрей Титов]

Петр Мухуров, а почему не срабатывает export class Component?

[Петр Мухуров]

Андрей Титов, а с чего вы взяли, что не срабатывает? Срабатывает, но вы кидаете в экспорт функцию, а не экземпляр класса. Класс - это по сути синтаксический сахар, функция-конструктор

[Андрей Титов]

Петр Мухуров, так и чего в итоге нужно добавить или поменять? Не врублюсь пока. Да и по видео несколько раз проверял код - отличий нет. Может это от версии node или webpack зависить?