Component doesn't work with latest Next.js

[tn]

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]

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]

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]

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