topic Re: Build Error with Typescript in ArcGIS JavaScript Maps SDK Questions

Build Error with Typescript

JimMatheson — Fri, 12 Mar 2021 15:53:57 GMT

We have a Preact app using the Preact-cli with Typescript template

The tsconfig.json is configured exactly per here: https://developers.arcgis.com/javascript/latest/typescript-setup/

ArcGIS API 4.18 states we can compile with just ES Modules: https://community.esri.com/t5/arcgis-api-for-javascript/build-error-with-typescript/m-p/1035951#M72025

In my TS file I have:

import EsriMap from "@arcgis/core/Map";

and in my componentDidMount I have:

const testMap = new EsriMap({ basemap: "streets-night-vector" });

However, when I build I continue to get the following error and the app fails to compile:

✖ ERROR ../node_modules/@arcgis/core/core/workers/WorkerFallback.js 167:20 Module parse failed: Unsyntactic break (167:20) File was processed with these loaders: * ../node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | }); | > break; | } catch ($boundEx) { | return $error($boundEx);

I also get the following warning (which is not as severe but needs attention):

⚠ WARN ../node_modules/@arcgis/core/core/workers/workers.js 67:37-46 Critical dependency: the request of a dependency is an expression @ ../node_modules/@arcgis/core/views/3d/support/WorkerHandle.js @ ../node_modules/@arcgis/core/layers/support/LercDecoder.js @ ../node_modules/@arcgis/core/layers/ElevationLayer.js @ ../node_modules/@arcgis/core/portal/Portal.js @ ../node_modules/@arcgis/core/Basemap.js @ ../node_modules/@arcgis/core/Map.js @ ./services/esri/esri.service.ts @ ./components/base-map/base-map.tsx @ ./components/app.tsx @ ./index.ts @ ../node_modules/preact-cli/lib/lib/entry.js

NOTE: everything works fine when I go the esri-loader route, however, we do not want to use that as we are planning for compile ES Modules and prefer to move away from AMD.

Any idea what the issue is here?

Thanks in advance...

Re: Build Error with Typescript

ReneRubalcava — Fri, 12 Mar 2021 16:20:03 GMT

For your case, try to change your tsconfig target to ES2019, not ES5. That's really for custom widget development.

Re: Build Error with Typescript

JimMatheson — Fri, 12 Mar 2021 16:24:33 GMT

That results in the same errors:

Re: Build Error with Typescript

AndyGup — Fri, 12 Mar 2021 16:28:05 GMT

Try again after running:

npm install @Anonymous User/core@next

Re: Build Error with Typescript

JimMatheson — Fri, 12 Mar 2021 16:28:11 GMT

Doing that results in even more errors 😞

Re: Build Error with Typescript

JimMatheson — Fri, 12 Mar 2021 16:39:09 GMT

So, @next did resolve the original build error but I am now seeing these new ones:

✖ ERROR ../node_modules/@arcgis/core/request.js Module build failed (from ../node_modules/babel-loader/lib/index.js): TypeError: ./node_modules/@arcgis/core/request.js: Cannot convert undefined or null to object at Function.keys (<anonymous>) at cloneNode (./node_modules/nodent-transform/arboriculture.js:10:12) at mapTryCatch (./node_modules/nodent-transform/arboriculture.js:935:70) at ./node_modules/nodent-transform/arboriculture.js:995:25 at Array.forEach (<anonymous>) at ./node_modules/nodent-transform/arboriculture.js:994:29 at treeWalk (./node_modules/nodent-transform/arboriculture.js:2846:5) at down (./node_modules/nodent-transform/arboriculture.js:2840:13) at ./node_modules/nodent-transform/arboriculture.js:2799:21 at Array.forEach (<anonymous>) at ./node_modules/nodent-transform/arboriculture.js:2798:27 at Array.forEach (<anonymous>) at forEachNodeKey (./node_modules/nodent-transform/arboriculture.js:2796:14) at descend (./node_modules/nodent-transform/arboriculture.js:2817:9) at ./node_modules/nodent-transform/arboriculture.js:998:17 at treeWalk (./node_modules/nodent-transform/arboriculture.js:2846:5) @ ../node_modules/@arcgis/core/portal/Portal.js 31:0-30 437:11-12 @ ../node_modules/@arcgis/core/Basemap.js @ ../node_modules/@arcgis/core/Map.js @ ./services/esri/esri.service.ts @ ./components/base-map/base-map.tsx @ ./components/app.tsx @ ./index.ts @ ../node_modules/preact-cli/lib/lib/entry.js

Re: Build Error with Typescript

ReneRubalcava — Fri, 12 Mar 2021 18:59:36 GMT

Dug into this a little more and I'm stumped. Don't modify the default tsconfig with cli tooling based on our guide. That guide is for fresh projects. But still, some underlying preact babel stuff is causing an issue, I think because of the import expression in the workers, but I don't know how to tell preact to not break there. This is a new error not seen with any other build tooling so far.

Re: Build Error with Typescript

JimMatheson — Fri, 12 Mar 2021 21:00:40 GMT

You can test it by running the Preact-cli with the Typescript template flag and running through the setup process outline here:

https://developers.arcgis.com/javascript/latest/typescript-setup/

with focus on ES Modules as outlined here:

https://developers.arcgis.com/javascript/latest/install-and-set-up/#es-modules-via-npm

Re: Build Error with Typescript

JimMatheson — Thu, 18 Mar 2021 18:38:59 GMT

Bump .... still trying to find a solution for this....