-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Setting loose: false
on @babel/plugin-proposal-class-properties
breaks fast refresh on React Native
#3102
Comments
I think this issue same with #3100 |
I don't think there is much we can do about this.
It may, it may not. The implementation assumes that class fields work as defined by ECMAScript standard. |
It might be from having emit decorator metadata turned on. For whatever reason, that breaks stuff with mobx sometimes . Never have bothered looking into it, but im positive it can cause issues. |
Maybe this solution #3100 (comment) helps you |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Hours spent here: 1 mobxjs/mobx#3102
Dropping this here just in case you're using Nx, this is the babel config that worked for me:
babel version: 7.18.6 |
@Kawaljeet-AUI I found by adding |
In my case, React Native FlatList was breaking with an error Here's the babel config that worked
|
I'm using React Native 0.65.1 with TypeScript and Decorators for mobx and was following the official guide for enabling decorators.
The guide states that the Babel plugin
@babel/plugin-proposal-class-properties
must be installed and enabled inbabel.config.js
like so:But doing that breaks the fast refresh on React Native.
Intended outcome:
React Native fast refresh should work as intended.
Actual outcome:
React Native fast refresh does not work at all.
Interesting part here is that setting
loose: true
on@babel/plugin-proposal-class-properties
fixes the fast refresh and most importantly mobx still works just fine. Furthermore removing the@babel/plugin-proposal-class-properties
entirely has the same effect - fast refresh works fine and mobx works just fine as well.My
tsconfig.json
file looks like this:How to reproduce the issue:
npx react-native init AwesomeTSProject --template react-native-template-typescript
;mobx
andmobx-react
;"experimentalDecorators": true,
and"useDefineForClassFields": true
intsconfig.json
file;babel.config.js
:ts/tsx
files on the project and confirm that fast refresh does not work.Versions
mobx: 6.3.3
mobx-react: 7.2.0
react: 17.0.2
react-native: 0.65.1
typescript: 3.8.3
Additional notes
I'm confused why mobx decorator documentation requires
@babel/plugin-proposal-class-properties
to haveloose
set tofalse
but settingloose
totrue
or entirely removing@babel/plugin-proposal-class-properties
doesn't break mobx. Am I missing something here? Ifloose: false
is truly required maybe I have not encountered something that setting it totrue
breaks?The text was updated successfully, but these errors were encountered: