ArcGIS for JS + TypeScript + reactiveUtils

[Zdenekprocner]

Hi everybody,
I can't use the method .watch  (reactiveUtils.watch)
and I do not know why.

Classic JS ( with js api 4.20 ) and watchUtils.watch worked fine,
but with JS ( TypeScript - js api 4.24) I have problem.

And for completeness:
npm list
api-ts@1.0.0 D:\groupApp\appc
+-- @types/arcgis-js-api@4.24.0
+-- npx@10.2.2
`-- typescript@4.7.4

tsconfig.json:
...
"compilerOptions": {
"lib": ["ES2015","ES2015.Promise", "DOM"],
"module": "AMD",
"sourceMap": true,
"strict": true,
"target": "ES5",
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors":true,
"esModuleInterop": true
}
...

I am attaching a piece of code from the file main.ts:
main.ts:
import ArcGISMap from "esri/Map";
import MapView from "esri/views/MapView";
import MIL from "esri/layers/MapImageLayer";
import rU from "esri/core/reactiveUtils";
...
...
const mapLay_1 = new MIL({
url:"https://..../MapServer",
title:"XXXXXX"
})
map.add(mapLay_1);

...
view.when(() => {

mapLay_1.when(() => {
console.log("# info mapLay_1: ",mapLay_1) // I see, that is OK - layer is loaded

rU.watch(() => mapLay_1.visible, (visible) => {
console.log("??? reactiveUtils ??? >>>> ",mapLay_1.title, "visible:", mapLay_1.visible)
});

})

}) //view.when(

I have error in JS console:
Using ArcGIS API for JavaScript 4.24 [Date: 20220706, Revision: 7fd01dbc]
...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'watch')

Thank you for your help
Zdenek Procner

[ReneRubalcava · Accepted solution]

reactiveUtils doesn't have a default export, so you can do one of two things.

// import all methods
import * as rU from "@arcgis/core/core/reactiveUtils";

// only import the method you're interested in
import { watch } from "@arcgis/core/core/reactiveUtils";

[Zdenekprocner]

Hello,
yes, you are absolutely right.
Thank you for your answer.
Zdeněk Procner

import * as rU from "esri/core/reactiveUtils";

[Zdenekprocner]

...

https://developers.arcgis.com/javascript/latest/es-modules/

At the top of each module's API Reference page is guidance on which import syntax to use: default or namespace. Most of the modules use a default import syntax as shown in the import WebMap Class example above. Other modules, such as those providing helper functions, use a namespace import similar to the import * as projection example. Depending on your stylistic preference, instead of a namespace import you can also use a named import to reference the exact method that you need.