Issue with export class Bug { ... }; export default Bug; in Babel 7

[Ashoat]

I am seeing this issue with react-native@0.56.0 and metro@0.38.3 (and also metro@0.38.1).

Here's the code that causes the issue:

export class Bug {

  constructor(props) {
    this.test(props);
  }

  test = (props) => {
    // Error-causing line
    const test = props.test;
  }

}

export default Bug;

The error is:

error: bundling failed: TypeError: Property body[1] of BlockStatement expected node to be of a type ["Statement"] but instead got "ClassExpression"
    at validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:130:13)
    at validator (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:97:7)
    at Object.validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:177:7)
    at validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.BlockStatement (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/builders/generated/index.js:245:31)
    at NodePath.replaceExpressionWithStatements (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/replacement.js:212:57)
    at NodePath.insertBefore (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/modification.js:47:17)
    at NodePath.unshiftContainer (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/modification.js:204:15)

I've created a repo with this minimal repro here. I attempted to repro the issue without Metro, by setting up a Babel project with the same code and babel-preset-react-native here, but was unable to repro. My conclusion is that the issue has something to do with how Metro consumes Babel.

[Ashoat]

I initially found this problem while investigating this React Native issue. Additionally I think this React Native issue might be related, which @charpeni was able to repro on a naked Metro setup.

In both cases, the issue can be addressed by using two separate expressions to declare the class versus export it.

[Ashoat]

This Babel issue may be related. It looks like the specific issue there had to do with plugin ordering, which perhaps is the culprit here (though I doubt in the same way).

[rafeca]

@mjesun does this have anything to do with the Babel issues that manifest on our constant folding plugin? (more info)

[mjesun]

Yeah, it could be. Apparently scope traversing has some bugs in Babel. I've tried pinging them with no luck, though.

[Ashoat]

If we could get a pure-Babel repro I think it would easier to get their attention. But my attempts at that were unsuccessful, probably because I’m not accurately mirroring the way Metro consumes Babel. Any advice?

[mjesun]

The issues I've found so far are related to calling path.scope.crawl() after performing some evaluations. See an example in babel/babel#8387; maybe this helps repro'ing.

[kelset]

I think this may be fixed via Babel 7.0 and Metro 0.44.x (once this is merged #233)

[rafeca]

Yes, we can close this one already! 😄