topic Custom widget error in ArcGIS JavaScript Maps SDK Questions

Custom widget error

ViktorSafar — Mon, 15 Aug 2022 10:12:36 GMT

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:

Re: Custom widget error

AndyGup — Mon, 15 Aug 2022 15:05:09 GMT

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

Re: Custom widget error

jefferson_bzp — Wed, 17 Aug 2022 19:52:35 GMT

@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?

Re: Custom widget error

RachelGomez — Mon, 21 Nov 2022 06:02:21 GMT

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