Static properties can't refer to the current class within inline export default

[charpeni]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 703.73 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

In React Native, a static property can't refer to the current class if the class have an inline export default.

React Native (not working) 🔴

Snack link: https://snack.expo.io/Bys85tXXX

export default class App extends Component {
  static a = 'test';
  static b = App.a; // undefined is not an object (evaluating 'App.a')

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{App.b}</Text>
      </View>
    );
  }
}

React Native (working)

Moving the export default after the class declaration solved the issue.

Can't be reproduced in Snack (we still get the previous error), but can be reproduced in a local react-native@0.56.0 project.

- export default class App extends Component {
+ class App extends Component {
   static a = 'test';
   static b = App.a;

   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.paragraph}>{App.b}</Text>
       </View>
     );
   }
 }

+ export default App;

React (working)

Stackblitz link: https://stackblitz.com/edit/react-15s44p

export default class App extends Component {
  static a = 'test';
  static b = App.a;

  render() {
    return (
      <div>
        {App.b}
      </div>
    );
  }
}

[patrickkempff]

Maybe this is an issue with metro and not react-native itself?

[charpeni]

Highly related to Babel 7 and how metro consume it, let's move this issue once we'll have sort it out.

I've been able to reproduce the issue without react native: https://github.com/charpeni/metro-static-properties-issue.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.