search

giovanesantossilva / react-leaflet-draft

A modern study React component of leaflet draw for react-leaflet
ISC License
26 stars 4 forks source link

Error: Rendered fewer hooks than expected. #8

Open ocni-dtu opened 1 year ago

ocni-dtu commented 1 year ago

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.

giovanesantossilva commented 1 year ago

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

ocni-dtu commented 1 year ago

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>
  )
}
giovanesantossilva commented 1 year ago

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

ocni-dtu commented 1 year ago

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
giovanesantossilva commented 1 year ago

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

lyvyu commented 1 year ago

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",
giovanesantossilva commented 1 year ago

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

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

StefanoOcchetti commented 1 year ago

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.

giovanesantossilva commented 10 months ago

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

tioirawan commented 10 months ago

any updates on this?