MappedIn maps on a nextjs app

Mappedin JS
1

Hello,
Am building a trade fair app with wayfinding via mappedin react sdk does the react sdk work on nextjs app as I am having troubles to get the map to show using the components.

2

Hi Charles,
Try using dynamic importing for the component that has the Mappedin map:

import dynamic from "next/dynamic";
const Map = dynamic(() => import("@/components/Map"), {
  loading: () => <div />,
  ssr: false,
});
3

Hey Chris,

Thank you for the feedback, have used dynamic importing however, am still getting the following on console while using the latest mappedIn v6 react-sdk

  1. Module not found: Can’t resolve ‘../../fonts/roboto-regular.ttf’
  2. Module not found: Can’t resolve ‘svg/maplibregl-ctrl-compass.svg’
  3. Module not found: Can’t resolve ‘svg/maplibregl-ctrl-geolocate.svg’
  4. Module not found: Can’t resolve ‘svg/maplibregl-ctrl-logo.svg’
  5. Module not found: Can’t resolve ‘svg/maplibregl-ctrl-terrain.svg’

the map is not showing, is this a nextjs issue only as using vite the map works okay. Am more inclined to using nextjs than vite.

Would appreciate any help to resolve so i can use mappedin with nextjs

4

Hi Charles,
Thanks for the details. The font issue was an issue with our react-sdk, and the team has released a fix (6.0.1-beta.53). The map should load in nextjs and it looks like the page doesn’t have to use dynamic importing.

With respect to the svgs, if you are adding a maplibregl control to the map, try importing maplibre-gl. Our sdk does give a reference to the maplibregl map but it won’t surface all the features and assets from maplibre-gl.

Hopefully those do the trick.

5

Thank you so much Chris,

The font issue is now fixed after updating.

Regarding the svgs am not trying to add any maplibre-gl controls yet but I still get these errors even with the basic setup as per the documentation using the sdk

6

Hi Charles,
Great to hear the font issue is resolved.

I’m sharing a link to a basic nextjs project that I’ve been testing with, which doesn’t show the svg errors. Can you let me know if this project works for you and maybe we can figure out the differences that might be triggering svg errors in your project.

Here is the project:

Thanks,
Chris

7

Thanks again Chris,

Your nextjs project opens the map well. :+1:

Much appreciated for the great support

8

Great to hear Charles!

Good luck with next steps,
Chris