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#M720...
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...
Any idea what the issue is here?
Thanks in advance...
For your case, try to change your tsconfig target to ES2019, not ES5. That's really for custom widget development.
That results in the same errors:
Try again after running:
npm install @Anonymous User/core@next
Doing that results in even more errors 😞
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
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.
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
Bump .... still trying to find a solution for this....