react native and mobx 6.x with TypeScript and Babel recommend options cause network request without any response

[woowalker]

How to reproduce the issue:
npx react-native init MyApp --template react-native-template-typescript
yarn add mobx mobx-react
babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ '@babel/plugin-proposal-class-properties', { loose: false, }, ], ], assumptions: { setPublicClassFields: false, }, };
tsconfig.json
{"compilerOptions": { "useDefineForClassFields": true, ...others }}
App.tsx


get rid off those options

Versions

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "mobx": "^6.3.2",
    "mobx-react": "^7.2.0",
    "react": "17.0.2",
    "react-native": "0.65.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.64.5",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

[urugator]

I can't imagine how a compilation of your sources could affect behavior of React/fetch, which I assume comes already pre-compiled and therefore is not a subject of your compilation configuration (?).
My first guess would be it has something to do with HMR and the seeming relation with compiler configuration is just a coincidence.
What do you see in the console?

[woowalker]

@urugator error like that, but it still appears when i remove the recommend options.

and it is very weird that, when i connect to React-Native-Debugger tool and enable network inspect, it works

and my node version: v12.17.0, npm version: 6.14.4
by the way, i use vpn, but when i stop debugging mode, and turn off vpn, i still got nothing response.

[urugator]

Ok, so do I understand correctly, it's not related to mobx and therefore the issue can be closed here?

You may want to check:
Original issue: facebook/react-native#26705
Proposed fix: facebook/react-native#31153
Resolution: facebook/react-native#31153 (comment)

[woowalker]

emmmm, sorry about that, i have searched more before, but still cant find solution, may be its not mobx`s problem, but on new RN project without any packages and options, it work well as expect until add mobx and those recommend option.

and if its only matter of debugger, when i close debugger and even release to apk, it still not work. i am confused.

[enniel]

Hi @woowalker! I think finded solution. Add this to babel config:

...
  overrides: [
    {
      test: fileName => !fileName.includes('node_modules'),
      plugins: [[require('@babel/plugin-proposal-class-properties'), { loose: false }]],
    },
  ],
...

[woowalker]

sorry to reopen this issue, i try my hard, but it still happened. @enniel and sorry, it not work for me. but i found an solution, set babel config to

plugins: [
    ...
    ['@babel/plugin-transform-flow-strip-types'], // prevent compile
    ['@babel/plugin-proposal-decorators', { legacy: true }], // must in front of class-properties
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    ...
]

it works, and #3102 fast refresh work again.

[urugator]

@woowalker could you also try to combine them like this:

  overrides: [
    {
      test: fileName => !fileName.includes('node_modules'),
      plugins: [
        ['@babel/plugin-transform-flow-strip-types'],
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ['@babel/plugin-proposal-class-properties', { loose: false }],
      ],
    },
  ],

and like this:

plugins: [
   ['@babel/plugin-transform-flow-strip-types']
],
overrides: [
    {
      test: fileName => !fileName.includes('node_modules'),
      plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ['@babel/plugin-proposal-class-properties', { loose: false }],
      ],
    },
  ],

?

[randomtoni]

Hello,

I'm confused, I'm trying to add this configuration but the second I do, I get another issue about "undefined is not an object (evaluating 'props.getItem')". As explained here, this happens by adding ['@babel/plugin-proposal-class-properties', { loose: false }] in plugins or overrides.

How can I make this work? Thank you

[stale]

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.

[siddharth-kt]

@randomtoni did you got any solution ?

[randomtoni]

@siddharth-kt I was having a configuration issue but it really took me a long time to figure it out. I tried many many things, so I'm not able to tell you what really solved the issue. This is my last and working configuration for babel

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          "@components": "./components",
        }
      }
    ],
    ["module:react-native-dotenv", {
      "moduleName": "react-native-dotenv",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
};

[siddharth-kt]

@randomtoni Thanks, as i see you remove "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],
but its mentioned to be implemented in mobx installation docs (https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties).
didn't it caused any issue ? 🤔

[randomtoni]

everything has been working without any issues for a while now. A a general rule, I always clear the cache between configs changes (react-native start --reset-cache), sometimes it didn't picked up the differences.

[randomtoni]

One more thing. That was my config for react-native, for a react project I ended up using

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins":[
    ["@babel/plugin-transform-typescript"],
    ["@babel/plugin-proposal-decorators", { "legacy": true } ],
    ["@babel/plugin-proposal-class-properties", { "loose": true } ],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-transform-flow-strip-types"] // prevent compile
  ]
}

[siddharth-kt]

@randomtoni yeah its implemented here.
Thanks for sharing it. 🙂

[Kawaljeet-AUI]

Dropping this here just in case you're using Nx, this is the babel config that worked for me:

"plugins": [
  ["react-native-reanimated/plugin"],
  ["@babel/plugin-proposal-private-methods", { "loose": true }],
  ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
}

babel version: 7.18.6