I am getting an error in App Router. Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.

[DaX-523]

Even when i copy pasted the code i got this error
Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of from render. Or maybe you meant to call this function rather than return it.
<... className=... width="800" height=... center=... zoom=... children={function children}>
Is this related to using App Router???
Because when i cloned the repository it was working fine with pages directory
The issue arises in this snippet

<Map
            className={styles.homeMap}
            width="800"
            height="400"
            center={DEFAULT_CENTER}
            zoom={12}
          >
            {({ TileLayer, Marker, Popup }) => (
              <>
                <TileLayer
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                />
                <Marker position={DEFAULT_CENTER}>
                  <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                  </Popup>
                </Marker>
              </>
            )}
          </Map>

Any help would be great :)

[KaidiMohammed]

Even when i copy pasted the code i got this error Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of from render. Or maybe you meant to call this function rather than return it. <... className=... width="800" height=... center=... zoom=... children={function children}> Is this related to using App Router??? Because when i cloned the repository it was working fine with pages directory The issue arises in this snippet

<Map
            className={styles.homeMap}
            width="800"
            height="400"
            center={DEFAULT_CENTER}
            zoom={12}
          >
            {({ TileLayer, Marker, Popup }) => (
              <>
                <TileLayer
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                />
                <Marker position={DEFAULT_CENTER}>
                  <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                  </Popup>
                </Marker>
              </>
            )}
          </Map>

Any help would be great :)

Hello, I have the same problems, but I think it's related to the Next.js updates, I didn't find a solution for that, but this repo seems working well with the app router https://github.com/detautama/Example-React-Leaftlet-In-Nextjs-13-App-Router

[colbyfayock]

Thanks for sharing a potential solution. I'll eventually get to looking at this but would be happy to review a PR if either of you are interested!

[DaX-523]

Thanks for sharing a potential solution. I'll eventually get to looking at this but would be happy to review a PR if either of you are interested!

Sure, that would be great. I'll be looking right into it.

[KaidiMohammed]

Thanks for sharing a potential solution. I'll eventually get to looking at this but would be happy to review a PR if either of you are interested!

sure