Getting parse error on class property declaration despite having @babel/plugin-proposal-class-properties installed

[SamMakesThings]

Hi,

As the title says, I'm getting a parse error on a class property declaration despite having the relevant plugin installed and following all the troubleshooting tips I could find. Any help is greatly appreciated! It's a React Native codebase.

Code where the error arises:

// Prepare hooks for authentication functions
const AuthContext = React.createContext();

// Root app component
export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
    user: null,
  };

  // If user is logged in, store that in app state
  componentDidMount() {
    this.subscribeAuthChange(fbUser => { this.setState({ user: fbUser }); console.log(this.state.user);});
    this.subscribeAuthChange(fbUser => { GLOBAL.userData = fbUser });
  };

  // Getting the parse error at this line. Any attempt at declaring a property triggers it.
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: undefined,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  // Render a loading screen if loading, otherwise load the main app
  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <AuthContext.Provider value={authContext}>
          <NavigationContainer> {/* Wrapper component for react-navigation 5.0 */}
            <View style={styles.container}>
              <ThemeProvider theme={slumber_theme}> {/* Theme wrapper for Draftbit theme*/}
                {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
                <AppNavigator />
              </ThemeProvider>
            </View>
          </NavigationContainer>
        </AuthContext.Provider>
      );
    }
  }
});

.babelrc file:

{
    "presets": ["@babel/react", "babel-preset-expo"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

.eslintrc.json:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base",
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        },
        "babelOptions": {
            "configFile": "./babelrc"
          }
    },
    "rules": {
        "react/display-name": 1,
        "no-unused-vars": "warn"
    },
    "parser": "babel-eslint",
    "plugins": [
        "react",
        "react-native"
        ],
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

Error message:

Parsing error: Unexpected token

  37 | 
  38 |   // Copying auth functions from react-navigation guide
> 39 |   const [state, dispatch] = React.useReducer(
     |         ^
  40 |     (prevState, action) => {
  41 |       switch (action.type) {
  42 |         case 'RESTORE_TOKEN':

[JLHwung]

Can you post the version of babel-eslint? Note that only babel-eslint@11 will respect the root babel configuration.

[SamMakesThings]

Hmm, it's 10.0.3, which seems to be the latest stable release? I see 11 in beta, should I install that to fix the problem?

Other package versions in case it's relevant:

{
  "dependencies": {
    "@draftbit/ui": "^2.39.1-16",
    "@expo/samples": "2.1.1",
    "@expo/vector-icons": "^10.0.0",
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/bottom-tabs": "^5.0.5",
    "@react-navigation/native": "^5.0.4",
    "@react-navigation/stack": "^5.0.4",
    "date-time-format-timezone": "^1.0.21",
    "expo": "^36.0.0",
    "expo-asset": "~8.0.0",
    "expo-constants": "~8.0.0",
    "expo-font": "~8.0.0",
    "expo-google-app-auth": "^8.0.1",
    "expo-permissions": "~8.0.0",
    "expo-secure-store": "~8.0.0",
    "firebase": "^7.8.1",
    "grpc": "^1.20.2",
    "intl": "^1.2.5",
    "react": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-typography": "^1.4.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.3",
    "babel-preset-expo": "^8.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-native": "^3.8.1",
    "jest-expo": "^36.0.0"
  },
  "private": true
}

[kaicataldo]

Prior to v11 (which is in prerelease), babel-eslint didn't read .babelrc files and just enabled everything by default. This was unfortunately hardcoded and ended up getting really out of sync with what Babel actually supports. We're working on getting this next version ready for primetime, but until then, installing the latest v11 version should fix it!

[SamMakesThings]

Thanks for the response @kaicataldo!

Anything special I need to do to install it? I just replaced the babel-eslint folder in my node_modules with the v11 from releases (and installed dependencies), but I'm still getting the same error even after a restart.

[SamMakesThings]

Turns out my error may be beyond babel-eslint - getting the same error when I try to compile (which I thought the regular Babel would handle). Am now not very sure of anything lol.

Weird that this is triggering errors, given that the code in question is copied from this example in react-navigation: https://snack.expo.io/?platform=android&name=Authentication%20flows%20%C2%B7%20React%20Navigation&dependencies=%40react-native-community%2Fmasked-view%40%5E0.1.1%2C%40react-navigation%2Fnative%405.0.4%2C%40react-navigation%2Fbottom-tabs%405.0.4%2C%40react-navigation%2Fdrawer%405.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%405.0.4%2C%40react-navigation%2Fmaterial-top-tabs%405.0.4%2C%40react-navigation%2Fnative-stack%405.0.4%2C%40react-navigation%2Fstack%405.0.4%2Creact-native-gesture-handler%401.5.2%2Creact-native-reanimated%401.4.0%2Creact-native-safe-area-context%400.6.0%2Creact-native-screens%402.0.0-alpha.12&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Fauth-flow.js

Will keep trying things.

[SamMakesThings]

Still not sure what's up with this, but I don't know enough to know whether this is a bug or just something I'm doing wrong. Have just stopped using class properties for now, and in any case the bug doesn't seem to be with babel-eslint. Closing the issue.