Hot reloading no longer works after adding Babel plugin

[Gluant101]

Description

joelso — Yesterday at 01:54 Hey everyone, I'm currently trying to understand the Babel plugin as detailed here: https://gluestack.io/ui/docs/production-optimizations/babel-plugin.

Do I have it right that I should add the plugin to my React Native app that is using Gluestack UI to get all performance benefits? I assume yes, but there is this wording in the docs that confuses me a bit (plus I noticed that in the boilerplate project no such babel config is there):

Note: We already provide you with the plugin config for @gluestack-ui/themed. So you have to do minimal configuration to get it working.

Also, after adding it, I've noticed that hot reloading no longer works. Has anyone else encountered this issue, or does anyone have any insights on how to address it? Or is it so that I should not need it/use it while in dev mode only for prod builds?

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

3.3.1

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[ankit-tailor]

Hey @Gluant101, Thanks for reporting the issue. We'll look into it.

[vyobukhov]

@ankit-tailor any updates on this issue?

P.S. Hot Reload is broken only for gluestack components. Also using // @refresh reset on the file with gs components also works but it's obviously not a solution

[vyobukhov]

Also it looks like that the issue is related only to gluestack props manipulation. Hot reloading for regular props and adding / removing components works fine.

But when I try to change color or set gs-props like px nothing is updated. So something is wrong in visitor.JSXOpeningElement

[vyobukhov]

@Viraj-10 @ankit-tailor

any updates on this issue? It's really hard to develop without hot reload since you spent too much time reloading scenes manually. Not sure how other devs live without it or they just ignore babel optimisations completely