"Cannot use namespace 'Point' as a type" when updating Mapbox GL

Question

In our Angular project, we recently updated from Mapbox GL 1.13.2 to 3.6.0. For context, Mapbox GL has a dependency on @mapbox/vector-tile, and @mapbox-vector-tile has a dependency on @mapbox/point-geometry.

After compiling this, we're met with a new error:

Error: node_modules/@types/mapbox__vector-tile/index.d.ts:16:21 - error TS2709: Cannot use namespace 'Point' as a type.

16     loadGeometry(): Point[][];

That type definition file contains this (reduced) code:

mapbox__vector-tile/index.d.ts

import Point = require("@mapbox/point-geometry");

export class VectorTileFeature {
    loadGeometry(): Point[][];
}

And @mapbox/point-geometry uses the following (reduced) type definition:

mapbox__point-geometry/index.d.ts

declare class Point {
    . . .
}

export = Point;

I found from playing around that this can be fixed by manually editing the vector-tile library's type file to change Point[][] to Point.default[][], but this isn't a viable solution, since this is in library code, and we'd need to patch it after every install. I tried adding custom type definitions to override the library's, but realized after that those can't affect how libraries see types.

My first thought was that this is an issue with the library, so it should be reported as such, but Mapbox is a popular library, and I can't find any other instances of this error when I search. That suggests that I have something misconfigured.

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2022",
    "typeRoots": [
      "types",
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom",
      "dom.iterable"
    ],
    "useDefineForClassFields": false,
    "allowSyntheticDefaultImports": true,
  },
}

How can I fix this and get it compiling? I do not want to use skipLibCheck, since I'd like to have types checks in libraries to catch potential issues.

---

Edit:

This appears to be an clash between Mapbox and Mapbox Draw, which we also use. I have an issue open here.

Answer 1

I ran into this too after upgrading to Mapbox GL 3.6.0. The issue is with how TypeScript handles CommonJS-style export = modules (like @mapbox/point-geometry) when used in type declarations.

You’ll see this error:

Cannot use namespace 'Point' as a type.

That’s because @types/mapbox__vector-tile uses this pattern:

import Point = require("@mapbox/point-geometry");

And later tries to use Point as a type, which TypeScript doesn’t like unless your tsconfig is configured right.

Update your tsconfig.json to include:

{
  "compilerOptions": {
    ...
    "esModuleInterop": true
  }
}

---

EDIT:

If "esModuleInterop": true doesn't solve it, it's likely because the problem is happening inside the @types/mapbox__vector-tile package itself, which uses import = require(...) and tries to use the import as a type.

Create a custom type definition file in your project: types/mapbox__vector-tile-fix.d.ts with the following code:

declare module "@mapbox/vector-tile" 
{ 
   import Point from "@mapbox/point-geometry"; 
   export class VectorTileFeature { 
      loadGeometry(): Point[][]; 
   }
} 

Make sure your tsconfig.json includes:

"typeRoots": 
   [ "types", "node_modules/@types" ]

This will override the broken loadGeometry() type for your code, without touching node_modules. You can also add this to make TypeScript happy when importing Point other places:

import Point from '@mapbox/point-geometry';