Cannot find module 'mapbox-gl/dist/mapbox-gl.js'

Question

I am getting an error when trying to import mapboxgl into my TypeScript file.

I've done it like in the README for mapbox-gl-js:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

Then when I run the typescript compiler:

tsc

I receive this error:

error TS2307: Cannot find module 'mapbox-gl/dist/mapbox-gl.js'.

But for some reason, everything still gets compiled and works fine. So I am confused what this actual means?

I have created an issue for this on Github: https://github.com/mapbox/mapbox-gl-js/issues/3767

score 2 · Accepted Answer · answered Dec 08 '16 at 17:27

I was able to get around this issue by using this import instead:

import * as mapboxgl from 'mapbox-gl';

But not all is fixed by this. I'm using Rollup for bundling and this has now caused an error:

Illegal reassignment to import 'mapboxgl'
Error: Illegal reassignment to import 'mapboxgl'
at error (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\utils\error.js:2:14)
at disallowIllegalReassignment (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\nodes\shared\disallowIllegalReassignment.js:9:4)

See this answer on how to get around the Rollup error: http://stackoverflow.com/a/41118458/2393347 — Michael Wilson, Dec 13 '16 at 10:15

score 0 · Answer 2 · answered Dec 08 '16 at 19:45

0

error TS2307: Cannot find module 'mapbox-gl/dist/mapbox-gl.js'

The mapbox-gl/dist/mapbox-gl.js file is a build file which is not checked into git. It is included with the npm package. If you are missing this file, you may generate it by running npm install && npm run build-min in the mapbox-gl folder.

answered Dec 08 '16 at 19:45

Lucas Wojciechowski

3,695
16
19

I'm not missing the file, I think the main reason this error occurs is due to TypeScript not detecting its a module. – Michael Wilson Dec 09 '16 at 09:13
If you see my answer below, I instead used the main script in npm and was able to import via ```import * as mapboxgl from 'mapbox-gl';```, but this is now causing an error with the rollup bundler – Michael Wilson Dec 09 '16 at 09:13

score 0 · Answer 3 · answered Dec 12 '16 at 17:03

0

Yes your right. To declare (like for most external js libraries): from the root of your folder (you may have to use sudo for npm install).

$ npm install -g typings;
$ typings install --save --global dt~geojson
$ typings install --save --global dt~mapbox-gl

PS: I'm working on this also. I can serve and build but on android-simulation i get a black screen. Could you right how it is for you it would be nice

answered Dec 12 '16 at 17:03

workfluo

11
2

```import * as mapboxgl from 'mapbox-gl';``` will stop this error and I didn't need to install typings for it. But the downside is that when using the Rollup bundler, this error is outputted ```Error: Illegal reassignment to import 'mapboxgl'``` – Michael Wilson Dec 12 '16 at 17:26
1

or maybe this: npm install --save @types/mapbox-gl – workfluo Dec 12 '16 at 18:22
because this: npm install --save @types/mapbox-gl – workfluo Dec 12 '16 at 18:23

score 0 · Answer 4 · answered Jan 16 '17 at 19:57

0

This might be against all things holy, but I did get things to work by importing like so...

const mapboxgl = require('../../../node_modules/mapbox-gl/dist/mapbox-gl.js'); const Map = mapboxgl.Map

answered Jan 16 '17 at 19:57

BrandonReid

1,264
1
13
17

Cannot find module 'mapbox-gl/dist/mapbox-gl.js'

4 Answers4