react-leaflet-draft Error: Rendered fewer hooks than expected.

Getting the following error on the latest (2.0.0) of react-leaflet-draft:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Aug 10 '23 11:08 ocni-dtu

Hello budy, how are you? Could you show me the code where it is so I can check it here?

Aug 10 '23 12:08 giovanesantossilva

I just have simple component like this:

export const Map = ({height, width, coordinates}) => {
  const handleDrawnShape = () => {
    console.log("DRAWN")
  }

  const handleDeleteShape = () => {
    console.log("DELETE")
  }
  return (
    <MapContainer center={coordinates} zoom={6} style={{ height: height, width: width }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      <FeatureGroup>
        <DraftControl
          position='topright'
          draw={{
            rectangle: {},
            polygon: false,
            circle: false,
            polyline: false,
            marker: false,
            circlemarker: false,
          }}
          onCreated={handleDrawnShape}
          onDeleted={handleDeleteShape}
        />
      </FeatureGroup>
    </MapContainer>
  )
}

Aug 10 '23 14:08 ocni-dtu

if you have it somewhere try moving the useEffect hook above the if conditions to solve the problem!

Aug 10 '23 20:08 giovanesantossilva

The problem is I don't have any useEffect hooks in this component tree.

I'll paste my stack trace below:

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Previous: []
Incoming: [[object Object], topright]
LeafComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:117:36
ContainerComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:88:45
div
MapContainerComponent@http://localhost:4200/node_modules/.vite/deps/react-leaflet.js?v=68d601bc:251:31
Map@http://localhost:4200/src/components/map/map.tsx:21:20
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
HomePage@http://localhost:4200/src/pages/homePage/homePage.tsx:27:47
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Outlet@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3652:3
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Grid4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6904:38
PageLayout@http://localhost:4200/src/routes/pageLayout.tsx:21:27
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Routes@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3714:7
AppRoutes
KortforsyningRoutes
AuthenticatedTemplate@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:209:7
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
ThemeProvider2@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5111:7
ThemeProvider3@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5198:7
ThemeProvider4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:20952:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
Suspense
AppContainer@http://localhost:4200/node_modules/.vite/deps/@arkitema_layout.js?v=17ab5ca3:41:20
App
ApolloProvider@http://localhost:4200/node_modules/.vite/deps/chunk-A7FSUME6.js?v=4e4ce994:16428:16
ApolloTokenProvider@http://localhost:4200/node_modules/.vite/deps/@arkitema_datafetching.js?v=e4ce0627:145:27
MsalProvider@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:125:7
Router@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3665:7
BrowserRouter@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:4130:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Previous: []
Incoming: [[object Object], [object Object]]
LeafComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:117:36
ContainerComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:88:45
div
MapContainerComponent@http://localhost:4200/node_modules/.vite/deps/react-leaflet.js?v=68d601bc:251:31
Map@http://localhost:4200/src/components/map/map.tsx:21:20
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
HomePage@http://localhost:4200/src/pages/homePage/homePage.tsx:27:47
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Outlet@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3652:3
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Grid4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6904:38
PageLayout@http://localhost:4200/src/routes/pageLayout.tsx:21:27
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Routes@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3714:7
AppRoutes
KortforsyningRoutes
AuthenticatedTemplate@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:209:7
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
ThemeProvider2@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5111:7
ThemeProvider3@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5198:7
ThemeProvider4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:20952:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
Suspense
AppContainer@http://localhost:4200/node_modules/.vite/deps/@arkitema_layout.js?v=17ab5ca3:41:20
App
ApolloProvider@http://localhost:4200/node_modules/.vite/deps/chunk-A7FSUME6.js?v=4e4ce994:16428:16
ApolloTokenProvider@http://localhost:4200/node_modules/.vite/deps/@arkitema_datafetching.js?v=e4ce0627:145:27
MsalProvider@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:125:7
Router@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3665:7
BrowserRouter@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:4130:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-JEXKZRFY.js:12
    js index.js:6
    __require chunk-JEXKZRFY.js:12
    React 2
    __require chunk-JEXKZRFY.js:12
    js React
    __require chunk-JEXKZRFY.js:12
    node_modules chunk-YVDGUS3F.js:12889
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:12969
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13024
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13348
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13375
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13521
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:19931
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20019
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20204
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20231
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20390
    __init chunk-JEXKZRFY.js:9
    <anonymous> index.js:12

The above error occurred in the <ForwardRef(LeafComponent)> component:

LeafComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:117:36
ContainerComponent@http://localhost:4200/node_modules/.vite/deps/chunk-TKKIXVHC.js?v=4e4ce994:88:45
div
MapContainerComponent@http://localhost:4200/node_modules/.vite/deps/react-leaflet.js?v=68d601bc:251:31
Map@http://localhost:4200/src/components/map/map.tsx:21:20
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
HomePage@http://localhost:4200/src/pages/homePage/homePage.tsx:27:47
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Outlet@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3652:3
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Grid4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6904:38
PageLayout@http://localhost:4200/src/routes/pageLayout.tsx:21:27
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
RenderedRoute@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3265:7
Routes@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3714:7
AppRoutes
KortforsyningRoutes
AuthenticatedTemplate@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:209:7
div
node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:1924:50
Container4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:6080:33
ThemeProvider2@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5111:7
ThemeProvider3@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:5198:7
ThemeProvider4@http://localhost:4200/node_modules/.vite/deps/chunk-YVDGUS3F.js?v=4e4ce994:20952:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5
Suspense
AppContainer@http://localhost:4200/node_modules/.vite/deps/@arkitema_layout.js?v=17ab5ca3:41:20
App
ApolloProvider@http://localhost:4200/node_modules/.vite/deps/chunk-A7FSUME6.js?v=4e4ce994:16428:16
ApolloTokenProvider@http://localhost:4200/node_modules/.vite/deps/@arkitema_datafetching.js?v=e4ce0627:145:27
MsalProvider@http://localhost:4200/node_modules/.vite/deps/chunk-7MC7LZGJ.js?v=4e4ce994:125:7
Router@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:3665:7
BrowserRouter@http://localhost:4200/node_modules/.vite/deps/chunk-PSZI5ABU.js?v=4e4ce994:4130:7
ErrorBoundary@http://localhost:4200/node_modules/.vite/deps/chunk-5XDWZPMS.js?v=4e4ce994:36:5

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Uncaught error: Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-JEXKZRFY.js:12
    js index.js:6
    __require chunk-JEXKZRFY.js:12
    React 2
    __require chunk-JEXKZRFY.js:12
    js React
    __require chunk-JEXKZRFY.js:12
    node_modules chunk-YVDGUS3F.js:12889
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:12969
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13024
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13348
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13375
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:13521
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:19931
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20019
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20204
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20231
    __init chunk-JEXKZRFY.js:9
    node_modules chunk-YVDGUS3F.js:20390
    __init chunk-JEXKZRFY.js:9
    <anonymous> index.js:12

Aug 11 '23 06:08 ocni-dtu

Hello, I was unable to replicate your problem here! can you pass me the used packages and their versions?

Aug 22 '23 21:08 giovanesantossilva

Hello, I was unable to replicate your problem here! can you pass me the used packages and their versions?

Hi, I have the following:

    "react": "^17.0.1",
    "react-leaflet": "^4.2.1",
    "react-leaflet-draft": "^2.0.0",
    "leaflet": "^1.9.4",

Aug 23 '23 09:08 lyvyu

Hello, to fix this problem I have two possible solutions for now:

Since you are using react@17, downgrade react-leaflet@ˆ3 and react-leaflet-draft@ˆ1.2.1.
Or upgrade react@17 to react@18.

I hope to help temporarily, but I'm working to try to solve other problems pointed out in this issue!

Aug 26 '23 13:08 giovanesantossilva

I have the same problem in a next.js application. It looks like the problem occurs when an "onCreated", "onEdited" or an "onDeleted" event is set to the component. I think the error is in https://github.com/giovanesantossilva/react-leaflet-draft/blob/main/src/Draft/index.js lines 13-24 and 34-41. I feel like statements like context.map.on(event, propValue); should always be handled by a private function (instead of propValue), then that private function should decide to call propValue or not.

Aug 28 '23 12:08 StefanoOcchetti

I'm coming back now, I'll check your tip and try to actually solve the problem.

Dec 31 '23 01:12 giovanesantossilva

any updates on this?

Jan 04 '24 15:01 tioirawan

react-leaflet-draft react-leaflet-draft copied to clipboard

Error: Rendered fewer hooks than expected.

react-leaflet-draft
react-leaflet-draft copied to clipboard