Custom Widget: Cannot find module or its corresponding type declarations.ts(2307)

08-24-2020 09:21 AM
Occasional Contributor

I have written a widget using JS API 4.16/TypeScript and I'm deploying it in another application (also using TypeScript) and I'm getting the error in the post title on compile. In index.html I have:

window.dojoConfig = {
        packages: [
            name: "my-widget",
            location: "/Widgets/MyWidget/app"

and in my main.ts I have (this is the line generating the error):

import MyWidget = require("my-widget/MyWidget");

the error is the same as the title: Cannot find module or its corresponding type declarations.ts(2307)

my tsconfig is:

  "compilerOptions": {
    "lib": ["es5""es6""dom""scripthost"],
  "include": ["./app/*"],

  "exclude": ["node_modules"]

the file structure is:



.. .. ..main.ts

.. ..index.html

.. ..tsconfig.json


.. ..MyWidget/

.. ..

.. .. .. ..MyWidget.ts .js etc

How can I resolve this error? There's a lot of info on developing custom widgets, but not much on deploying/moving to production, so I'm looking for any tips on the best way to do that, too.

0 Kudos
2 Replies
Esri Regular Contributor

It looks like the order is incorrect in this line:

import MyWidget = require("my-widget/MyWidget");

Should be something like this:

import MyWidget = require("MyWidget/my-widget");

Here are some examples about this workflow from our samples page:

Create a custom widget | ArcGIS API for JavaScript 4.16 

Custom Recenter Widget | ArcGIS API for JavaScript 4.16 

0 Kudos
Occasional Contributor

Thanks for the reply. I've tried using the order you suggested and it results in the browser trying to load my widget from the js api, and generating a not found error.

From DevTools console:

GET 404

Using the original order, the code still compiles and loads properly in the browser. That made me think it was a problem with my TypeScript configuration.

0 Kudos