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 · Accepted solution]

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"
    ]
  }

[jefferson_bzp]

@AndyGup ,

First of all, thanks for the above answer, it helped me to solve this issue.

As I said, the above solution worked when I use the native html markup, however, when I add Material UI for example, the error below occurs.

Source code

Is there a workaround?

[RachelGomez]

Tips to fix-

Launch the App. Widgets are extensions of an app installed on your phone. 
Restart Your Device. 
Remove and Re-Add the Widget. 
Disable Battery Optimization. 
Check for App Updates. 
Clear App Data and Cache. 
Update Your Phone.

Greeting,

Rachel Gomez