Getting HMR errors (trying to build a customizable Slider component)

heyyy guys. so, following a tip of our friend @zonal_mammal in the thread (https://plasmiccommunity.slack.com/archives/C0128PVPESU/p1647789507753609), I started to build my own slider component. I want it 100% (or near of it) customizable. Where designers can insert arrows, dots, and work with it freely. So I basically followed the idea of Querying data with code components (plasmic.app).
Its working normally after I change the code and refresh the Studio. however, if I make a change on the code and do not refresh the page (HMR), I got the first print error attached. Also, in dev tool console, I am getting the second print error attached when I first interact with the component. Am I doing something wrong or this is coming from React Slick library?

I haven’t used React for a while, and honestly, the only reason I decided to use it in the project is because of Plasmic. So I really would appreciate your help with it.

I will send my code in this thread.

Slider.tsx

SliderItems.tsx

NextButton.tsx

so to be clear: the slider is working, the button is working, but HMR is not working. once I update my code, it will crash on Studio

I’ve seen that error message myself but I cannot recall what exactly I did to solve this… you can start of by

  1. wrapping it in React.forwardRef
  2. use the same react + react-dom version everywhere
    perhaps that helps already

Hi @old_bug,
I will share a video explaining how to use the Code Component I shared with you. You don’t need to have separate NextButtton component.

P.S
If for some reason, you want to stick with this approach of React Context, then try using Plasmic Global Context for this. I haven’t used them myself so far so I can’t add much to this.
https://docs.plasmic.app/learn/global-contexts/

My previous comment is related to Studio Artboard showing error even after doing a refresh.

As far I know, HMR won’t work with Plasmic Studio, we need to refresh the studio everytime we update the code component.

goootcha! I figured HMR should work. so you usually get this message as well?

The error differs sometimes but HMR doesn’t work. It’s expected behavior to refresh the project after changes

gotcha! thanks man