"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.

Silly question, but: did you check the release dates (not just version numbers) for the versions of those libraries, to make sure they're type-aligned, and if not, pin them to versions that are known to work together? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Apr 22 at 22:18
Trying to replicate your error, I created a minimal npm project, installed [email protected] -- all the files you describe are there in node_modules; Then, using your tsconfig.json I compiled without error a few simple typescript files like import {VectorTile} from '@mapbox/vector-tile'; const tile: VectorTile = new VectorTile(null); console.log(tile.layers); (and similarly using Point as type). Consider starting a new project and adding to it until you get your error -- it might help you solve it yourself, or at least help us replicate it. — kikon
– kikon, Commented Apr 23 at 0:35
@Mike'Pomax'Kamermans I don't have either as a direct dependency. I have a dependency on Mapbox GL JS, and it has a dependency for specific versions of the point and vector libraries. — Carcigenicate
– Carcigenicate, Commented Apr 23 at 13:46
@kikon I'm not sure why I didn't think to do this given I do the exact same thing for smaller problems. I've never done that procedure for an entire project before. I was moved to a different task, unfortunately, but I'll give this a shot when I switch tasks again. Thanks. — Carcigenicate
– Carcigenicate, Commented Apr 23 at 13:47

T. Blok · Accepted Answer · 2025-04-25 21:44:12Z

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';

edited Apr 25 at 21:44

answered Apr 24 at 12:24

T. Blok

981 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Carcigenicate Apr 24 at 13:48

Unfortunately, this does not fix the issue. I still get the same error after the change.

T. Blok Apr 25 at 21:35

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.

T. Blok Apr 25 at 21:38

Create a custom type definition file in your project: types/mapbox__vector-tile-fix.d.ts withe 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';

T. Blok Apr 25 at 21:45

sorry for the long comment... i edited my answer for better readability ^^.

Carcigenicate Apr 28 at 13:56

Unfortunately, this also didn't fix it. It seems that you can't override an import in a library's type definition file.

Carcigenicate · Accepted Answer · 2025-05-08 17:55:35Z

0

This ultimately seems to be caused by a type clash between Mapbox GL JS and the Mapbox GL Draw library that we also use.

I opened an issue on the Mapbox Draw Github page at the advice of one of the Mapbox devs:

https://github.com/mapbox/mapbox-gl-draw/issues/1393

answered May 8 at 17:55

Carcigenicate

46.5k12 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related