Custom widget error

ViktorSafar

Hi, I am new to ArcGIS JS and have been following your docs and tutorials. I have a problem with my custom widget which is made based off the Custom Widget docs.

 

I was not able to upload a post containing code here so I put my code to github:

https://github.com/safarviktor/arcgisJS-widget-demo

 

There is an error from Widget.js:

TypeError: Cannot add property properties, object is not extensible
at s (Widget.js:5:1)
at g (tracking.js:5:1)
at M.render (Widget.js:5:1)
at h (projector.js:5:1)
at Object.merge (projector.js:5:1)
at l._attach (Widget.js:5:1)
at _internalHandles.add.initial (Widget.js:5:1)
at reactiveUtils.js:5:1
at m (reactiveUtils.js:5:1)
at f (reactiveUtils.js:5:1)

There is a DIV element added to the DOM - likely a wrapper for the widget - but not the content of the widget:

 

 

AndyGup

Hi @ViktorSafar you can't really mix React/TypeScript with our JS API Widget framework. To work around that try the following to allow the widget to parse correctly:

 

// @ts-nocheck
/** @jsxRuntime classic */
/** @jsx tsx */
import Widget from "@arcgis/core/widgets/Widget";
import { subclass } from "@arcgis/core/core/accessorSupport/decorators";
import { renderable, tsx } from "@arcgis/core/widgets/support/widget";
// import React from 'react';

@subclass("esri.widgets.HelloWorld")
class HelloWorldWidget extends Widget {

    render() {
        console.log("rendering")
        return (
            <div id="myhello">
                HELLO
            </div>
        );
    }
}

export default HelloWorldWidget;

 

 

I also recommend updating your package.json browserslist to minimize transpiling:

 

  "browserslist": {
    "production": [
      "last 1 Chrome version",
      "last 1 Firefox version",
      "last 2 Edge major versions",
      "last 2 Safari major versions",
      "last 2 iOS major versions",
      "Firefox ESR"
    ],
    "development": [
      "last 1 Chrome version",
      "last 1 Firefox version",
      "last 2 Edge major versions",
      "last 2 Safari major versions",
      "last 2 iOS major versions",
      "Firefox ESR"
    ]
  }