Build Error with Typescript

685
8
03-12-2021 07:48 AM
JimMatheson
New Contributor II

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

 

 

 

 

 

 

 

 

 

 

 

0 Kudos
8 Replies
ReneRubalcava
Frequent Contributor

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

0 Kudos
JimMatheson
New Contributor II

That results in the same errors:

JimMatheson_0-1615566262016.png

 

0 Kudos
AndyGup
Esri Regular Contributor

Try again after running: 

 

npm install @Anonymous User/core@next

 

 

0 Kudos
JimMatheson
New Contributor II

Doing that results in even more errors :(

JimMatheson_0-1615566484585.png

 

0 Kudos
JimMatheson
New Contributor II

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
0 Kudos
ReneRubalcava
Frequent Contributor

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.

0 Kudos
JimMatheson
New Contributor II

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

0 Kudos
JimMatheson
New Contributor II

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

0 Kudos