StandardJS linting返回静态变量的解析错误

Question

I do get an Parsing error: Unexpected token linting error for this line using standardJS. Therefore my CI is failing.

I don't understand what is wrong with this line. How could I fix this?

export default (App) => {
  return class Apollo extends React.Component {
    static displayName = 'withApollo(App)' // <--
    static async getInitialProps (ctx) {
    // ...
  }
}

Answer 1

If this is standard javascript then the error is that classes can only contain functions, not properties.

The correct syntax should be:

class Apollo extends React.Component {
  static async getInitialProps (ctx) {
  // ...
}

Apollo.displayName = 'withApollo(App)';

export default (App) => {
  return Apollo;
}

If you are using the proposed (but not yet implemented or approved) ES7/ES8 class properties then maybe eslint does not support it yet.

---

If, unlike the original question, you need to use the App parameter, Just do it in the function you want to export:

class Apollo extends React.Component {
  static async getInitialProps (ctx) {
  // ...
}

export default (App) => {
  Apollo.displayName = `withApollo(${App})`;
  return Apollo;
}