img-mapper/react-img-mapper

Error when using responsive props

Closed this issue · 5 comments

Describe the bug
null is not an object (evaluating 'imgRef.naturalWidth')

To Reproduce

<ImageMapper
  responsive
  parentWidth={100}
  areaKeyName="unique-key"
  onClick={() => {}}
  src={IMAGE} 
  map={MAP}
/>

Error Stack
Screen Shot 2021-04-12 at 7 22 17 PM

Expected behavior
I specify reponsive prop & parentWidth and the component auto-sizes

Desktop (please complete the following information):

  • React.js v16.13.1
  • react-img-mapper v1.1.5
  • OS: MAC
  • Browser: SAFARI
  • Version: 14.0.2

Additional context
Im pretty sure is something wrong with my setup. Everything else works flawlessly. Great job!

@NishargShah @kholy87 Hopefully one of you can help me fix this. Thanks in advance. Happy coding!

I think the problem is from your side please provide the code sandbox link to show us your problem.

I checked but I did not found any problem on that https://codesandbox.io/s/elegant-minsky-137mc?file=/src/App.js

No activity in question and I thought that question is also invalid that's why I am closing the question

It happens for example, when using responsive in combination with prefill. Just add "preFillColor": "#eab54d4d", into your codesandbox example area.json and it will crash with TypeError Cannot read properties of null (reading 'naturalWidth')

Ohh, I see, thanks for the explaintaion