1

We have NextJS + TypeScript setup and were looking to integrate Maplibre, which is basically a fork of Mapbox BSD. Also there's this nice wrapper around Mapbox - React Map GL, however it is not designed to work with Maplibre. Workaround is to create an alias in Webpack config, like this:

// webpack.config.js
module.export = {
  // ...
  resolve: {
    alias: {
      'mapbox-gl': 'maplibre-gl'
    }
  }
}

I also have this in the tsconfig.json:

    "paths": {
      // ...other aliases
      "mapbox-gl": ["maplibre-gl"]
    },

The problem is that in NextJS + TypeScript setup this for some reason has no effect. Either aliases for modules under node_modules are ignored by something in NextJS or TypeScript has precedence over some parts of the webpack configuration - it is not immediately clear.

Any ideas?

jayarjo
  • 16,124
  • 24
  • 94
  • 138
  • Are you getting any errors? – Elias Sep 19 '21 at 09:27
  • 1
    I mean one thing I can think of is that typescript wouldn't know about the alias. Maybe you need to define a [path](https://www.typescriptlang.org/tsconfig#paths) mapping? – Elias Sep 19 '21 at 09:36
  • Paths in tsconfig and aliases in webpack work in general, however for `node_moodules` specifically they seem to be ignored. There's no error. Just nothing happens. – jayarjo Sep 19 '21 at 11:50
  • @brc-dd added chunk of tsconfig (cannot add a full one), and - yes adding webpack piece to next.config.js – jayarjo Sep 19 '21 at 13:05
  • Tried it as well. Actually when I do `tsc --traceResolution` it doesn't even verify that alias. I would expect it to throw an error of some kind. – jayarjo Sep 19 '21 at 13:10
  • 1
    I tested this on local setup, and realized a few things. It doesn't matter at all what TS does or what TS is configured to do. In fact, that path settings is not necessary at all because we aren't directly accessing the library. We are accessing it via a wrapper. Secondly, the module alias appears to be working fine. Because without the alias I get some errors in my console like 401 on mapbox api, etc. There is some totally different problem here as the screen is coming blank. The component is loading, but it has nothing to show. – brc-dd Sep 19 '21 at 14:04
  • 1
    Finally made it work! You need to provide your own `mapStyle`. Try this one for example: `https://demotiles.maplibre.org/style.json`. Complete demo: https://codesandbox.io/s/objective-cannon-jfoxx?file=/pages/index.tsx, https://github.com/brc-dd/maplibre-next-ts-demo – brc-dd Sep 19 '21 at 14:57

0 Answers0