search

alex3165 / react-mapbox-gl

A React binding of mapbox-gl-js
http://alex3165.github.io/react-mapbox-gl/
MIT License
1.91k stars 534 forks source link

Component doesn't work with latest Next.js #882

Open tn opened 4 years ago

tn commented 4 years ago

Next.JS error:

./node_modules/mapbox-gl/dist/mapbox-gl.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-mapbox-gl/lib-esm/map.js

package.json

"dependencies": {
    "mapbox-gl": "^1.11.1",
    "next": "9.5.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-mapbox-gl": "^4.8.6"
  },
  "devDependencies": {
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.45",
    "typescript": "^3.9.7"
  }
aaronrmiller commented 4 years ago

hi, not sure if you resolved this or saw this thread: https://github.com/alex3165/react-mapbox-gl/issues/146,

there seems to be several next.js based solutions to this or adjacent to it. Incidentally none of them worked for me, but it might be my lack of experience with next

quickshiftin commented 3 years ago

None of the examples from #146 showing use of NextJS Dynamic Import feature illustrate use of the Layer and Feature components. For me these components still do not work in NextJS even when using Dyanmic Imports.

Stackoverflow thread with code sample available here.

tractorcow commented 3 years ago

Latest version ^5 works fine with next.js. Suggest to close this issue. :) I did not need dynamic imports.

I did have to manually add this to my _app.js though

import 'mapbox-gl/src/css/mapbox-gl.css';