Component doesn't render

[Tsabary]

Describe the bug
Just started to work with the lib and copy/pasted the example implementation but it doesn't render anything.

To Reproduce
This is my implementation (basic example):

import React from "react";
import ImageMapper from "reactjs-img-mapper";
import { Deck } from "../../../types/typeclass";

function PannelsMarker({ deck }: { deck: Deck }) {
  const URL =
    "https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg";

  const MAP = {
    name: "my-map",
    // GET JSON FROM BELOW URL AS AN EXAMPLE
    areas: [...the JSON file content],
  };

  if (!deck.layout_file) return <div>No file</div>;
  console.log("Should render map");
  return (
    <div className="p-2 bg-yellow-300">
      <ImageMapper src={URL} map={MAP} />
    </div>
  );
}

export default PannelsMarker;

Error Stack
Ony error is the following
Warning: ImageMapper: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Expected behavior
An image map should render

Screenshots
https://imgtr.ee/image/WqlTX

Desktop (please complete the following information):

• OS: [Windows]
• Browser: [Brave]
• Version: [1.56.20]

Additional context

I'm building my sie with Nxt.js 13.

[NishargShah]

Please come up with an example, you can use codesandbox to provide an example.

BTW: the package name is wrong, it is react-img-mapper not reactjs-img-mapper

[Tsabary]

Yes sorry my bad, tried a fork to see if it would make a different but it didn't. I've just tried to create a Sandbox but getting a different error regarding React an the library. Have to leave my computer now unfortunately but will try to share a working sandbox tomorrow.

https://codesandbox.io/p/sandbox/brave-bush-snhmy6

[Tsabary]

Ok, so I've tried figuring out what's going on with the sandbox but to no avail. This is the error I'm getting (you could see it in the sandbox link I've attached as well).
If I run this simple page with text and without the library it works just fine.

https://ibb.co/ScGfGCz

Have you tried working with your library on Next.js? I'm not sure why it should make any difference, but wondering if it might.

[Tsabary]

Ok, so I've created a SandBox with a simple React project, and it works just fine. I simply copy pasted the same code I've copy-pasted here, from my code, and the same one I've used for the SandBox I posted earlier.
With the simple React project the library works just fine, so I suspect it does have something to do with the library specifically combined with Next.js. Not sure what, but it seems to point to that.

For a moment I thought I figured it our by adding "use client" at the top of my file to make sure it's a client component and not a server one, but that made no difference.

https://codesandbox.io/p/sandbox/staging-sun-sfqczd

[NishargShah]

The problem is with your global.css, please comment it, it is working fine

Codesandbox: https://codesandbox.io/p/sandbox/nifty-glade-623wk8?file=%2Fapp%2Fglobals.css%3A7%2C27

[Tsabary]

It wasn't even that, looked like it didn't initiate the repo properly or something. I tried to comment it out and was still getting the same error. I've started a new sandbox and it then worked out of the box.
Anyway, it's now clear that it does work with Next.js, so must be something on my end. No idea what it might be, but I'll keep investigating - have to make this work.

I'll report back if I see it's something to warn others about.

[Tsabary]

EDIT: Again, I've experienced some inconsistencies. You can ignore point 2 as it seems that importing @tailwind base is the only consistent factor to whether the component renders or not.

Ok, so I've done more testing and this is what I came up with so far:

1. I'm not sure how I got it to work with no issues the second time, but you are right - globals.css was indeed an issue. Specifically, importing tailwinds base styles @tailwind base would cause the component either to show up or not. When imported it doesn't show and when not imported - it shows.

Tailwind being the popular library that it is, I think it's pretty important for this library to work together with it in the same project.
I rely on tailwind in my project, so I've tried copy pasting this library into my project and see if I can change something in it to make it play nicely with Tailwind.
That's when I've noticed the following thing:

2. Even WITH the tailwind's base styles imported, the component shows up when commenting out the following line ...(!imgRef ? { display: "none" } : {}), from the img tag.

I find it odd, that to make the component show, either this line needs to be removed, or tailwinds base styles, as this line is written with plain inline styling and should have nothing to do with tailwind's "className" based styling, as far as I understand.

Maybe you can make more sense of it @NishargShah

[NishargShah]

Ok, I will look into it, what is the actual issue, thanks for the help.

[Tsabary]

My pleasure, would love to help make it work.

I've edited my last comment. While it seemed consistent, it stopped being so, and even with that line disabled importing tailwind's base caused that component not to render.

I am not sure what is causing me to experience these inconsistencies given all else is the same, but regardless, it seems that importing @tailwind base is the only consistent factor to whether the component renders or not.

[Tsabary]

I've checked the tree in both cases. This is what we get with @tailwind base
https://ibb.co/X8ZNT5f

and this is what we get without it
https://ibb.co/ryN0KXz

If I manually change both the image & canvas heights & widths to the correct size (640 * 480 - sill using the example photo here), then the component enders just fine. Need to understand what about tailwind causes these values to be 0 and how to override it.

[Tsabary]

@NishargShah I found the source of the problem and the solution.

As mentioned, the issue was with applying @tailwind base.
When doing so, we were applying some base styles which could be found in the preflight file right here.

The style that was causing this issue is the default image maxWidth:

img,
video {
  max-width: 100%;  <---- This one
  height: auto;
}

I've copied the library to play with it, and the way to fix this issue is simply adding maxWidth:"none", to imgNonResponsive in styles.ts.

const imgNonResponsive: React.CSSProperties = {
  ...absPos,
  zIndex: 1,
  userSelect: "none",
  maxWidth:"none", <--- Add this
};

When this is added everything works just fine.

[NishargShah]

Thanks for helping @Tsabary, but I am suggesting you to go with custom styling, I have added an "img-mapper" id in the main container, you can specify the "max-width": "none" there.

#image-mapper {
    .img-mapper-img {
        max-width: none;
    }
}

[marcuspx]

In my case Tailwind is setting up
{ position: relative; width: 0px; height: 0px; }
I had to change it to
/* #img-mapper { position: relative !important; width: 640px !important; height: 480px !important; }

I'm getting problem with this because If I make it responsive the canvas is not :C
also if I change like you mentioned the hovering on Canvas is missing nothing happen in the image when I make hover