I am trying to use wrld.js with Angular

[baarbaracrr]

I have this errors of wrld.js:

./src/app/views/layout/layout.component.ts:38:20-28 - Error: export 'Wrld' (imported as 'Wrld') was not found in 'wrld.js' (possible exports: default)

Error: node_modules/wrld.js/dist/private/emscripten_api/emscripten_buildings_api.d.ts:16:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

16 import L from "leaflet";
          ~


Error: node_modules/wrld.js/dist/private/emscripten_api/emscripten_spaces_api.d.ts:24:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

24 import L from "leaflet";
          ~


Error: node_modules/wrld.js/dist/private/modules/camera_module.d.ts:18:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

18 import L from "leaflet";
          ~


Error: node_modules/wrld.js/dist/public/buildings/building_highlight_options.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/circle.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/heatmap.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/map_type.d.ts:1:13 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import type L from "leaflet";
              ~


Error: node_modules/wrld.js/dist/public/marker.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/native/polygon.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/native/polyline.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/polygon.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.

1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/polyline.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.
         ~


Error: node_modules/wrld.js/dist/public/rectangle.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.
1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/public/space.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.
1 import L from "leaflet";
         ~


Error: node_modules/wrld.js/dist/types/modules/buildings.d.ts:1:13 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.
1 import type L from "leaflet";
              ~


Error: node_modules/wrld.js/dist/types/window.d.ts:1:8 - error TS1192: Module '"C:/Users/baarb/GitKraken/enp_frontend/node_modules/@types/leaflet/index"' has no default export.
1 import L from "leaflet";
         ~




× Failed to compile.

[alinmateut]

More precisely, this is not something related to Angular, but to Typescript. If I have a simple TS file, named index.ts, containing the following 2 lines of code:

import {Wrld} from "wrld.js";
Wrld.map('wrldMapId', 'valid_api_key');

when I run tsc index.ts it throws me the errors you've posted.

Probably the issue will be fixed if you update the leaflet and @types/leaflet dependencies.

[chrisdjali-wrld3d]

Can you please try changing import {Wrld} from "wrld.js" to import Wrld from "wrld.js"?

[alinmateut]

Can you please try changing import {Wrld} from "wrld.js" to import Wrld from "wrld.js"?

@chrisdjali-wrld3d Yes, it doesn't change anything, because the errors are caused by @types/leaflet. It only gives me just one more error, in addition to the existing ones displayed above.

error TS1192: Module '"<path>/node_modules/wrld.js/dist/wrld"' has no default export.

1 import Wrld from "wrld.js";

However, the import {Wrld} from "wrld.js"; is working and the map is rendered only if I go to the node_modules files, i.e. inside node_modules/wrld.js/dist/private/emscripten_api/emscripten_buildings_api.d.ts:16:8, node_modules/wrld.js/dist/private/emscripten_api/emscripten_spaces_api.d.ts:24:8, etc, and start ignoring Typescript, like so:

// @ts-ignore
import L from "leaflet";

but this is not something you want to do since those files will be changed back at each npm i

[chrisdjali-wrld3d]

error TS1192: Module '"/node_modules/wrld.js/dist/wrld"' has no default export.

1 import Wrld from "wrld.js";

I suspect that whatever's causing this error is also causing all of the others. There is definitely supposed to be a default export, and it works on our end and for many of our customers, so we've not simply forgotten it. Can you think of anything potentially atypical about how you're consuming the wrld.js package?

[chrisdjali-wrld3d]

After some investigation, we've determined that wrld.js is intended to be used with the TypeScript compiler's allowSyntheticDefaultImports option enabled, or one of the other options that implies it. This is in addition to importing Wrld without the braces.

[alinmateut]

@chrisdjali-wrld3d I didn't do anything atypical. I created a simple TypeScript app here in Stackblitz. Unfortunately, Stackblitz doesn't show errors from the libraries (i.e. wrld.js) from node_modules, so you have to download the app to see that TypeScript doesn't compile.

After downloading it just npm run build in the command line to see the errors.

Note that I've replaced import Wrld from "wrld.js" with import * as Wrld from 'wrld.js'; to avoid enabling the option allowSyntheticDefaultImports. However, you can enable it if you really want, it's the same thing (see docs). But this is not the main problem, the problem is with the leaflet imports.

One problem I see in your package.json file

"dependencies": {
    "@types/leaflet": "^1.0.69", // this is not a fixed version, so after running `npm ci` I get the latest version
    "leaflet": "1.0.1"
  },

However, you should update leaflet and @types/leaflet to the latest version.

[chrisdjali-wrld3d]

Changing import Wrld from "wrld.js" to import * as Wrld from 'wrld.js' is not sufficient to avoid the need for allowSyntheticDefaultImports - we rely on synthetic default imports to import Leaflet types, so if you don't have it enabled, you'll get a bunch of has no default exports errors from Leaflet, exactly as you've seen. Wrld.js is itself built with allowSyntheticDefaultImports, which means that the emitted type declarations contain uses of synthetic default imports, too.

We actually do set Wrld as an explicit default export here https://github.com/wrld3d/wrld.js/blob/master/src/index.ts#L9, but the TypeScript compiler doesn't emit it into all variants of the compiled code that way as it's expecting everything consuming wrld.js to use allowSyntheticDefaultImports.

If you're averse to setting the compiler option, you could manually go through our emitted type declarations and change every instance of import L from "leaflet" to import * as L from 'leaflet', which might avoid the problem, but as you've already mentioned, that's not a sustainable solution. I wouldn't recommend this.

As an additional hurdle you'll need to overcome, the 1.9.3 release of @types/leaflet from a week ago has caused an incompatibility with wrld.js. We've got a fix on our bleeding edge track, but, as the name might suggest, there's currently a problem with that if you're using TypeScript, so I can't recommend that right now. Instead, if you're using a recent version of npm, you should be able to use the overrides section to make wrld.js use 1.9.2 or earlier with the [email protected] release.

[alinmateut]

I'm okay using allowSyntheticDefaultImports, but I'm not okay with overriding/downgrading @types/leaflet, since my app is using the latest version of leaflet in other places and it's pretty odd to have 2 leaflets. However, even if I want to use overrides I cannot do this, because of this npm bug.

[chrisdjali-wrld3d]

While we can theoretically tolerate the version of @types/leaflet changing, the only version of leaflet we support is 1.0.1. Unlike most Leaflet plugins, we need to override quite a lot of Leaflet's default behaviour instead of just registering for callbacks, and so can be sensitive to public-API-preserving changes that other things wouldn't be. This means we need a very thorough QA process and inevitably engineering time when we upgrade Leaflet. Both of those are limited resources that get allocated based on customer demand, and given that most of the new Leaflet features since 1.0.1 are very minor or irrelevant to 3D maps, there's been next to no customer demand for an upgrade.

Generally, you can't rely on other Leaflet plugins working with wrld.js. For some of them, the reason's fairly obvious, e.g. a new Layer needs to know how to project itself onto the 3D map. Other things work fine, but it can be better to think of wlrd.js as an alternative to Leaflet rather than just an addon, and set expectations accordingly when trying to integrate it into an application that already uses Leaflet.

If you want to take the risk of using an unsupported Leaflet version anyway and absolutely can't stick to @types/[email protected], we expect to have the issue with using our bleeding edge track in a TypeScript project to be resolved soon.

[alinmateut]

Thank you for your time, I really appreciate. I understand that the resources are limited, but freezing to a version has pretty many downsides. However, in our app wrld.js cannot be a replacement for leaflet because of the various use cases we have, it just doesn't make sense for the user perspective. We would like to become customers, wrld.js seems promising, but it's hard to decide if wrld.js fits our needs when the integration in our app doesn't work with the latest leaflet (or works with risks).

[SamAins]

Hello @alinmateut

The issue should be resolved now within. Version 1.1.0-bleeding-edge.2534

you are able to install this version with he following using npm
npm i [email protected]

But do continue to use allowSyntheticDefaultImports:true

Sam