Search code examples
typescriptimportleafletdefinitelytyped

TypeScript tring to import type definition instead of main module

I'm trying to import a module, as well as some of the types from its type definition package through DefinitelyTyped. I installed both:

npm i -D leaflet
npm i -D @types/leaflet

(This is going to be a leaflet plugin which requires leaflet as a peerDependency, hence the -D on leaflet itself).

At the top of a .ts file, I try to import these:

import L from 'leaflet';
import type { LatLng } from 'leaflet'

But typescript is telling me Module '"/Users/seth/Documents/GitHub/leaflet-topography/node_modules/@types/leaflet/index"' has no default export.ts(1192). That is true, but I'm not trying to import L from the type definitions, but from the leaflet package itself. Why is typescript assuming that this is a type definition? How can I change that so that the L that I'm importing is the leaflet library itself?

Solution

  • Why is typescript assuming that this is a type definition?

    The whole purpose d.ts files or the type Declaration files is to provide typescript the type information about an API that's written in JavaScript. You are still reading from the leaflet package but the typescript compiler will look for for the type definition file for the API to work under typescript platform. This will helps typescript for the all the static type analysis using type annotations defined in d.ts file.

    When you install the @typings for leaflet then it will become part of typescript eco-system.

    How can I change that so that the L that I'm importing is the leaflet library itself?

    As mentioned above typescript will look for type definition file for the leaflet API which is actually calling the leaflet API details.

    From the definition of the leaflet type definition files L is a namespace and does not have the default export. So you have to import this namespaces as below -

    import * as L from 'leaflet';

    If you are importing any specific class from leaflet then you can use below syntax -

    import { Circle } from 'leaflet'; //**NOTE DON'T MISS THE CURLY BRACES**

    Other option to fix the error would be to change the settings in the tsconfig.json file

    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default 
 export. This does not affect code emit, just typechecking. */