[Bug] React 19: "Warning: Invalid prop `source` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props."
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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