Custom widget error

151
2
Jump to solution
08-15-2022 03:12 AM
ViktorSafar
New Contributor II

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:

ViktorSafar_0-1660558277823.png

 

 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

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

 

 

View solution in original post

2 Replies
AndyGup
Esri Regular Contributor

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
New Contributor

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


jefferson_bzp_0-1660765884297.png

Source code

jefferson_bzp_1-1660765921238.png

Is there a workaround?

 

0 Kudos