Following install requirements for babel config in docs, fetch() stop working in RN app

[code-by]

I have create initial empty ReactNative application for migrate existing code from babel 5 to 6 using
npx react-native init
command and then add
mobx and mobx-react modules.
Looking into package.json in node_modules\@babel\core I detect that used babel version is 7.17.0
As far my code have both class and functional components and according the Use spec compliant transpilation for class properties section in docs (https://mobx.js.org/migrating-from-4-or-5.html#getting-started), for babel version >= 7.13 one need to set

{    
    // Babel >= 7.13.0 (https://babeljs.io/docs/en/assumptions)
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}

So my babel.config.js is following:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  assumptions: {
    setPublicClassFields: false,
  },
  plugins: [
    ['@babel/plugin-proposal-class-properties'],
  ],
};

part of my package.json:

  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.16.1",
    "@react-native-community/netinfo": "^7.1.12",
    "axios": "^0.26.0",
    "formik": "^2.2.9",
    "mobx": "^6.4.0",
    "mobx-react": "^7.3.0",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-base64": "^0.2.1",
    "react-native-device-info": "^8.4.9",
    "react-native-fast-image": "^8.5.11",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-public-ip": "^1.0.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },

running RN metro bundler, I have following output in console (three times at each run):

transform[stderr]: [proposal-class-properties]: You are using the "loose: true" option and you are explicitly setting a value for the "setPublicClassFields" assumption. The "loose" option can cause incompatibilities with the other class features plugins, so it's recommended that you replace it with the following top-level option:
transform[stderr]: 	"assumptions": {
transform[stderr]: 		"setPublicClassFields": true,
transform[stderr]: 		"privateFieldsAsProperties": true
transform[stderr]: 	}

I'm not pay big attention to these warnings and while copying files from my old project folder to new, e.g. starting screen, essential mobx stores and other project files and testing it works after each step. Finally reach to testing screen with async get request using axios lib, but execution hangs there. After trying multiple combination to realize what is wrong, and do fetch() at the root index.js I face that my app unable do fetch requests. Than I try determine what is wrong with my dev-settings, and after some experiments I found that problem with settings in babel.config.js!, I have change assumptions it to following

  assumptions: {
    //setPublicClassFields: false,
    setPublicClassFields: true,
    privateFieldsAsProperties: true,
  },

so fetch() began to work.
I spent few hours to find out where is problem..
may be it is more babel related bug/error, but I think it somehow could lead to problems with code, especially for newbies who not understand all these babel purposes, plugins and settings

[urugator]

Make sure the setPublicClassFields settings only affects YOUR sources, not any libraries/framework/etc sources:
#3100 (comment)

You may also try ['@babel/plugin-transform-flow-strip-types'] mentioned later...

[quimbaget]

What about typescript? Something extra needed? I Use Babel and TS and I can't get rid of this issue

[FrederickEngelhardt]

You could also do a patch-package on the metro-react-native-babel-preset and remove the loose true field. Example below.

You can either fork it or just maintain the patch. Alternatively grabbing the preset config directly does the same thing.

But that's only if you need it to affect a broader area of the app and don't want metro's preset interfering.

diff --git a/node_modules/metro-react-native-babel-preset/src/configs/main.js b/node_modules/metro-react-native-babel-preset/src/configs/main.js
index 5097a46..72d2b1c 100644
--- a/node_modules/metro-react-native-babel-preset/src/configs/main.js
+++ b/node_modules/metro-react-native-babel-preset/src/configs/main.js
@@ -23,10 +23,6 @@ const defaultPlugins = [
   [require("@babel/plugin-transform-block-scoping")],
   [
     require("@babel/plugin-proposal-class-properties"),
-    // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
-    {
-      loose: true,
-    },
   ],
   [require("@babel/plugin-syntax-dynamic-import")],
   [require("@babel/plugin-syntax-export-default-from")],

[raphaelsalviano]

I have the same problem, now using [email protected].

I have already tested all the solutions mentioned above and none of them worked for me.

Does anyone have any idea how to get around this?

[ruslan-moiseyenko]

Any luck with a solution? I've been fighting it for two days trying everything I could find. Nothing worked. It gives me these errors even after installing mobX on a bare RN template...

[cgarrovillo]

Oct 5 check in and this still does not work

[mweststrate]

Might be worth checking in with RN itself or the library you use for fetch? The configuration described above is the spec compliant configuration, so this rather seems an issue with the fetch implementation & RN defaults.

Note that MobX works with loose as well, but you'll have to explicitly mark the fields in makeObservable, or move the call to the end of your constructors, as the fields cannot be found using reflection in loose setting.

Basically:

class MyClass
  myField
  constructor() {
    // in spec compliant compilation, `myField` is already a member of `this` here,
    // in "loose" mode, however it is not until the first assignment!
  }

[cgarrovillo]

Gotcha thanks for explaining what the actual config even is. I wasnt aware this is spec compliant.

Will check in on the RN community