TypeError: Cannot read property 'createElement' of undefined

Question

I'm trying to create a widget in 4.11 and I'm getting the titular error. The traceback doesn't extend past the library code so I have no idea what part of my code actually causes the error, although my last breakpoint is at the widget's render function. I've attached my entire project (run "npm install; npm start" to build it and spin up a local web server) and I've pasted the main widget code below. /// /// import { declared, property, subclass, aliasOf } from "esri/core/accessorSupport/decorators"; import { renderable, tsx } from "esri/widgets/support/widget"; import TimeSliderVM, { TimeExtent } from "./TimeSliderVM"; import Widget = require("esri/widgets/Widget"); @subclass("ledcor.gis.widgets.TimeSlider") export default class TimeSlider extends declared(Widget) { @property() viewModel: TimeSliderVM @property() @renderable() @aliasOf("viewModel.currentTime") currentTime: Date @property() @renderable() @aliasOf("viewModel.extent") extent: TimeExtent constructor(start: Date, end: Date, current?: Date, params?: Partial<__esri.WidgetProperties>) { super(params); this.viewModel = new TimeSliderVM(start, end, current); } async _onClick(e: Event) { this.viewModel.currentTime = new Date() } render() { return ( <div class="esri-widget"> <h3>Time Slider</h3> </div> ); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Any help is appreciated, thank you! Sample App.zip

MattiasEkman1 · Answer

Hi!

I am not sure if you got any help with this or not (hopefully you solved it by now), but I got the same error when taking my first stumbling steps at creating a widget, so I had a look at your code (googled the error and found this question). I found out, that if I changed the contructor (in your TimeSlider.tsx) to this:

constructor(params?: any) {
    super();
 }

instead of yours:

constructor(start: Date, end: Date, current?: Date, params?: Partial<__esri.WidgetProperties>) {
    super(params);
    this.viewModel = new TimeSliderVM(start, end, current);
}

then the error didn´t happen. Then of course you need to change the call to creating a new TimeSlider (in main.ts) from:

const timeSlider = new TimeSlider(start, end, now);

To something like this:

const timeSlider = new TimeSlider({
    container: "widgetDiv",
    view: view
 });

And now you should at least se a div on the right having the text 'Time Slider'. After that you still have lots of work to do before the TimeSlider actually works, but this is perhaps a start. And if someone else gets the same error, this might be a help.

By the way, I used JavaScript API 4.13 and hade the same error.