visgl / visgl/react-map-gl

[Bug] React 19: "Warning: Invalid prop `source` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props."

Open
#2,410 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Description

I am testing ReactMapGL in React 19 with React Compiler and Next JS 15. I am getting this warning with ReactMapGL and Tailwind HeadlessUI about Fragments and Props.

This might be something temporary in one of the canary releases …
And I am not sure it it comes from React 19 (Probably), Next JS or the Compiler.

Warning: Invalid prop `source` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
    at Source (webpack-internal:///(app-pages-browser)/./node_modules/react-map-gl/dist/esm/components/source.js:76:64)
    at SourcesLayersAtlasGeoMemoized (webpack-internal:///(app-pages-browser)/./src/app/regionen/[regionSlug]/_components/Map/SourcesAndLayers/SourcesLayersAtlasGeo.tsx:46:13)
    at SourcesLayersAtlasGeo (webpack-internal:///(app-pages-browser)/./src/app/regionen/[regionSlug]/_components/Map/SourcesAndLayers/SourcesLayersAtlasGeo.tsx:172:72)
    at div
    at div
    at Map (webpack-internal:///(app-pages-browser)/./node_modules/react-map-gl/dist/esm/exports-maplibre.js:52:71)
    at Map (webpack-internal:///(app-pages-browser)/./src/app/regionen/[regionSlug]/_components/Map/Map.tsx:56:143)
    at div
    at MapProvider (webpack-internal:///(app-pages-browser)/./node_modules/react-map-gl/dist/esm/components/use-map.js:15:74)
    at MapInterface (webpack-internal:///(app-pages-browser)/./src/app/regionen/[regionSlug]/_components/MapInterface.tsx:42:72)
    at ShowRegionPage (Server)
Expected Behavior

No response

Steps to Reproduce
Environment
  • Framework version: "react-map-gl": "7.1.7",
  • Map library:"maplibre-gl": "4.3.2",
  • Browser:Chrome
  • OS:macOS
Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the warning with React 19, Next.js 15, react-map-gl 7.1.7, and maplibre-gl 4.3.2. Inspect node_modules/react-map-gl/dist/esm/components/source.js around line 76 and the SourcesLayersAtlasGeo stack entries to determine whether the warning originates in react-map-gl or a dependency. Done means the warning is no longer emitted in the reported setup, with the behavior covered by a regression check.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
data-visualization, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.