CODEWITHSUNDEEP
javascriptreactjstypescriptcanvasnext.js
Tsabary
Tsabary

Reputation: 3958

Image map library is working with React but fails on Next.js

I have a project for a client which requires me to use an image map. Searching for a good library, I was barely able to find anything maintainable. The best I found was this library.

https://github.com/img-mapper/react-img-mapper

For some reason though, it works just fine with React, but fails on Next.js - it simply doesn't render. Here's how it looks (I've added a yellow container around it to see where it should be) - https://imgtr.ee/image/WqlTX

I've tried to open a Sandbox to add to the issue I've reported, but the library makes it fail (something to do with the useState). I thought maybe it's because it tries to render it as a server component, so added "use client" to the component in which I render the image map but still nothing.

Here are the two Sandboxes:

Next.js - https://codesandbox.io/p/sandbox/brave-bush-snhmy6 React - https://codesandbox.io/p/sandbox/staging-sun-sfqczd

I've looked at the library's code, and it's not too complicated (in terms of working parts and components. I don't have much experience working with canvas) so I tried to just copy the entire code localy to my project and change what I can.

I've added "use client" to the image map component itself, and also replaced the img tag with next/image Image tag. Still nothing shows up (using constant values for height and width to try and narrow down what the issue might be). Any help here would be appreciated (would gladly take a reference for a different working library as well).

  return (
    <div ref={container} id="img-mapper" style={styles(props).container}>
      <Image
        ref={img}
        role="presentation"
        // className="img-mapper-img h-96 w-64"
        style={{
          ...styles(props).img,
          ...(!imgRef ? { display: "none" } : {}),
          height: 640,
          width: 480,
        }}
        src={srcProp}
        useMap={`#${map.name}`}
        alt="map"
        onClick={(event) => imageClick(event, props)}
        onMouseMove={(event) => imageMouseMove(event, props)}
        height={640}
        width={480}
      />
      <canvas
        ref={canvas}
        className="img-mapper-canvas"
        style={styles().canvas}
      />
      <map className="img-mapper-map" name={map.name} style={styles().map}>
        {isRendered && !disabled && imgRef && renderAreas()}
      </map>
    </div>
  );
};

Upvotes: 0

Views: 672

Answers (1)

DevFront
DevFront

Reputation: 11

@Tsabary

I fixed your project on Codesanbox, I just updated the next version to "13.5.4" it worked only show and error about the defaultProps but the owner of that should fix it https://codesandbox.io/p/sandbox/brave-bush-snhmy6

Upvotes: 0

Related Questions