No idea who would I contact. Using Typescript 3.4.1, React 16.8 and ArcGIS JS 4.11 I'm unable to compile when I added @types/arcgis-js-api, even when not using it. Attached is a very simple typescript react. It does nothing but unable to compile when @types/arcgis-js-api is installed. Any suggestions? Error output: node_modules/@types/react/index.d.ts:100:31 - error TS2344: Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement Component )>) | (new (props: any) => Component )'. Type 'string | number | ((props: any) => ReactElement Component )>) | (new (props: any) => Component )' is not assignable to type 'string | ((props: any) => ReactElement Component )>) | (new (props: any) => Component )'. Type 'number' is not assignable to type 'string | ((props: any) => ReactElement Component )>) | (new (props: any) => Component )'. Type 'T' is not assignable to type 'string'. Type 'string | number | ((props: any) => ReactElement Component )>) | (new (props: any) => Component )' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'. 100 > extends ReactElement { } package.json { "name" : "test2" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" } , "author" : "" , "license" : "ISC" , "dependencies" : { "react" : "^16.8.6" , "react-dom" : "^16.8.6" } , "devDependencies" : { "@types/arcgis-js-api" : "^4.11.0" , "@types/react" : "^16.8.11" , "@types/react-dom" : "^16.8.3" , "typescript" : "^3.4.1" } } tsconfig.json { "compileOnSave" : true , "compilerOptions" : { "target" : "es5" , "module" : "umd" , "removeComments" : true , "noEmitOnError" : true , "sourceMap" : true , "declaration" : false , "jsx" : "react" , "moduleResolution" : "node" , "esModuleInterop" : true , "forceConsistentCasingInFileNames" : true , "experimentalDecorators" : true , "lib" : [ "dom" , "scripthost" , "es5" , "es2015.promise" , "es2015.core" , "es2015.collection" , "es2015.iterable" ] } } test.zip S123_Error_2.jpg RenatoSalvaleon3_0-1731419367859.png

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Unable to compile with TypeScript with React and ArcGIS Types

JamesTruong

No idea who would I contact.

Using Typescript 3.4.1, React 16.8 and ArcGIS JS 4.11

I'm unable to compile when I added @types/arcgis-js-api, even when not using it.

Attached is a very simple typescript react.

It does nothing but unable to compile when @types/arcgis-js-api is installed.

Any suggestions?

Error output:

node_modules/@types/react/index.d.ts:100:31 - error TS2344: Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
    Type 'number' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
      Type 'T' is not assignable to type 'string'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string'.
          Type 'number' is not assignable to type 'string'.

100     > extends ReactElement<P, T> { }<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

package.json

<SPAN class="punctuation token">{</SPAN>
  <SPAN class="string token">"name"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"test2"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"version"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"1.0.0"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"description"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"main"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"index.js"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"scripts"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="string token">"test"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"echo \"Error: no test specified\" && exit 1"</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"author"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"license"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"ISC"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"dependencies"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="string token">"react"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^16.8.6"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"react-dom"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^16.8.6"</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"devDependencies"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="string token">"@types/arcgis-js-api"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^4.11.0"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"@types/react"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^16.8.11"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"@types/react-dom"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^16.8.3"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"typescript"</SPAN><SPAN class="operator token">:</SPAN> <SPAN class="string token">"^3.4.1"</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

tsconfig.json

<SPAN class="punctuation token">{</SPAN>
  <SPAN class="string token">"compileOnSave"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"compilerOptions"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"es5"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"module"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"umd"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"removeComments"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"noEmitOnError"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"sourceMap"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"declaration"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"jsx"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"react"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"moduleResolution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"node"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esModuleInterop"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"forceConsistentCasingInFileNames"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"experimentalDecorators"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>

    <SPAN class="string token">"lib"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"scripthost"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"es5"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"es2015.promise"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"es2015.core"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"es2015.collection"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"es2015.iterable"</SPAN><SPAN class="punctuation token">]</SPAN>   
  <SPAN class="punctuation token">}</SPAN>
  
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

test.zip

S123_Error_2.jpg

RenatoSalvaleon3_0-1731419367859.png

Trouver plus de publications taguées avec

Accepted answers

ReneRubalcava

Add

"skipLibCheck": true

to your tsconfig.json and the compiler won't check all declaration files. Not sure why that error occurs, but our typings shouldn't effect it. This fixes your issue.

All comments

Jack_Zhang

Hi Rene,

I'm using Typescript 3.8.3, and ArcGIS JS 4.15 and having similar issue in which the compiler reports errors as below on autocasting Color from string. The complied js works fine but it's a bit eyesore to have see this in VS code. I've added "skipLibCheck": true in the tsconfig.json within the compilerOptions but that didn't fix my problem. wonder if you could help me. thanks.

view
  <SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
    map<SPAN class="punctuation token">.</SPAN>ground<SPAN class="punctuation token">.</SPAN>navigationConstraint <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'none'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
    map<SPAN class="punctuation token">.</SPAN>ground<SPAN class="punctuation token">.</SPAN>surfaceColor <SPAN class="operator token">=</SPAN> <SPAN class="string token">'#fff'</SPAN><SPAN class="punctuation token">;</SPAN>
    map<SPAN class="punctuation token">.</SPAN>ground<SPAN class="punctuation token">.</SPAN>opacity <SPAN class="operator token">=</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">;</SPAN>

    map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

error

app<SPAN class="operator token">/</SPAN>main<SPAN class="punctuation token">.</SPAN>ts<SPAN class="punctuation token">:</SPAN><SPAN class="number token">104</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">5</SPAN> <SPAN class="operator token">-</SPAN> error TS2322<SPAN class="punctuation token">:</SPAN> Type <SPAN class="string token">'"#fff"'</SPAN> is not assignable to type <SPAN class="string token">'Color'</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="number token">104</SPAN> map<SPAN class="punctuation token">.</SPAN>ground<SPAN class="punctuation token">.</SPAN>surfaceColor <SPAN class="operator token">=</SPAN> <SPAN class="string token">'#fff'</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

tsconfig.json

<SPAN class="punctuation token">{</SPAN>
  <SPAN class="string token">"compilerOptions"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="string token">"module"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"amd"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"noImplicitAny"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esModuleInterop"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"sourceMap"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"jsx"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"react"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"jsxFactory"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"tsx"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"es5"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"experimentalDecorators"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"preserveConstEnums"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"suppressImplicitAnyIndexErrors"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"skipLibCheck"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>

  <SPAN class="string token">"include"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"./app/*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"exclude"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"node_modules"</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JamesTruong

Yeah, that got it to compile.

I don't get that error either.

The closest thing that could affect the react typing is the creating custom widgets

ReneRubalcava

Add

"skipLibCheck": true

to your tsconfig.json and the compiler won't check all declaration files. Not sure why that error occurs, but our typings shouldn't effect it. This fixes your issue.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.