TypeError: Cannot read property 'createElement' of undefined

2234
1
06-21-2019 09:58 AM
DavidSolari
New Contributor III

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.

/// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />

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!

0 Kudos
1 Reply
MattiasEkman
Esri Contributor

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.

0 Kudos