@babel/plugin-proposal-class-properties breaks reload, logging

Summary

I was looking to use mobx in my expo project and followed these instructions: https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties.

Doing so seems to break hot reload as well as logging, at least to the terminal. You can still see log output if you run adb logcat.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

44

Environment

  expo-env-info 1.0.2 environment info:
    System:
      OS: Linux 5.16 Arch Linux
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.14.0 - ~/.volta/tools/image/node/16.14.0/bin/node
      Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
      npm: 8.3.1 - ~/.volta/tools/image/node/16.14.0/bin/npm
      Watchman: 20220227.015527.0 - /usr/bin/watchman
    IDEs:
      Android Studio: AI-211.7628.21.2111.8139111
    npmPackages:
      expo: ~44.0.0 => 44.0.5 
      react: 17.0.1 => 17.0.1 
      react-dom: 17.0.1 => 17.0.1 
      react-native: 0.64.3 => 0.64.3 
      react-native-web: 0.17.1 => 0.17.1 
    Expo Workflow: managed

Reproducible demo

Repro here: https://github.com/saevarb/expo-babel-bug

1. Clone
2. yarn && yarn start
3. Open App.tsx, observe console.log in component, but missing in terminal log output
4. Edit App.tsx, observe no automatic reload

[saevarb]

I managed to find a solution for this here:

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    overrides: [
      {
        test: fileName => !fileName.includes('node_modules'),
        plugins: [[require('@babel/plugin-proposal-class-properties'), { loose: false }]],
      },
    ],
  };
};

[MatthieuJnon]

Tysm @saevarb you literally saved me hours and hours. You’re the best!