Edit: Solved by updating to alpha version of react-img-mapper.
I am using the react-img-mapper library () and it had been working fine until I needed to add functionality which requires conditional rendering of another component.
Essentially, whenever I need to set the other component's display to true/false the page needs to refresh and the img-mapper library throws an error saying it doesn't have the correct lengths - even tho it had been working fine on the initial load, and I've tried console.logging the values to see that they're populated correctly.
Any help would be appreciated! Also open to changing my system of using JSON files if there's any other alternative, I'm relatively new to this!
Edit: I've discovered that this happens on any reload of any page with an img-map, I tried pushing to the router the current page and it results in the same error.
Here is the relevant page's code:
"use client"
import { React, useEffect, useState } from "react";
import ImageMapper from "react-img-mapper";
import { useRouter } from 'next/navigation'
import coords from "/public/JSON/coords.js";
import RecipeBook from "./RecipeBook";
export default function Kitchen() {
const router = useRouter();
const [showBook, setShowBook] = useState(true);
const [kitchenCoords, setKitchenCoords] = useState(null);
useEffect(() => {
setKitchenCoords(coords.kitchenCoords);
}, []);
if (!kitchenCoords) {
return (<body className="kitchen"><h1>Loading...</h1></body>)
}
return (
<body className="kitchen">
<div className="tvbgContainer">
<ImageMapper className="tvbg"
map={{
name:"my-map",
areas: kitchenCoords
}}
src={'/background/kitchenpage.png'}
active={true}
responsive={true}
parentWidth={900}
length={900}
width={900}
onClick={(e) => {
// if it's one of the buttons, redirect there
(e.title == "/about/me/" || e.title == "/about/credits/" || e.title == "/") ? router.push(e.title)
: // else show book
// setShowBook(!showBook);
console.log(kitchenCoords);
}}
/>
</div>
{showBook &&
<RecipeBook setShowBook={setShowBook}/>
}
</body>
);
}
The JSON file, shortened with ellipses looks like this:
let kitchenCoords = [
{
"id": "homeButton",
"title": "/",
"shape": "rect",
"fillColor": "rgba(0,0,0,0)",
"strokeColor": "rgba(0,0,0,0)",
"lineWidth": 2.5,
"coords": [530,738,586,791]
},
...
]
export default {homeCoords, kitchenCoords};
Errors
TypeError: Cannot read properties of undefined (reading 'length')
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.