React-docgen fails to parse components with optional chaining.

If a component contains optional chaining it will now fail to parse. This used to work.

I’m on version 4.1.1.

Now you get this error:

Error: did not recognize object of type "ChainExpression"
    at Object.getFieldNames (/proj/node_modules/ast-types/lib/types.js:661:19)
    at visitChildren (/proj/node_modules/ast-types/lib/path-visitor.js:186:36)
    at Visitor.PVp.visitWithoutReset (/proj/node_modules/ast-types/lib/path-visitor.js:168:20)
    at visitChildren (/proj/node_modules/ast-types/lib/path-visitor.js:205:25)
    at Visitor.PVp.visitWithoutReset (/proj/node_modules/ast-types/lib/path-visitor.js:168:20)
    at NodePath.each (/proj/node_modules/ast-types/lib/path.js:89:26)
    at visitChildren (/proj/node_modules/ast-types/lib/path-visitor.js:180:18)
    at Visitor.PVp.visitWithoutReset (/proj/node_modules/ast-types/lib/path-visitor.js:168:20)
    at visitChildren (/proj/node_modules/ast-types/lib/path-visitor.js:205:25)
    at Visitor.PVp.visitWithoutReset (/proj/node_modules/ast-types/lib/path-visitor.js:168:20)

I kind of suspect this has to do with one of the transitive dependencies more that react-docgen but I’m logging this here first.

How to recreate, run the following test against the below jsx file.

test.js

const reactDocs = require('react-docgen');
const fs = require('fs');

const filePath = './file.jsx';

const source = fs.readFileSync(filePath, 'utf8');

const parsedProps = reactDocs.parse(source);

console.log('parsed', parsedProps);

file.jsx

import React from 'react';

const ApplicationBase = () => {
  const thing = {
    stuff: 'stuff',
  };

  // Parse works when the next line is commented out.
  const string = thing?.stuff;
  // Works when un-commented
  // const string = 'stuff';

  return (
    <div>
      {string}
    </div>
  );
};

export default ApplicationBase;

Also an issue template would help me remember all the things you’d like to see on an issue 😄

[mjhenkes]

You can work around this problem by locking in your babel dependencies in your project’s package.json

For example:

  "devDependencies": {
-    "@babel/core": "^7.5.0",
+    "@babel/core": "7.10.5",
+    "@babel/parser": "7.10.5",

Here’s the change we made to our project: https://github.com/cerner/terra-ui/pull/290/files

[Brianzchen]

Note that you can’t fix this in your project without using e.g. resolutions in yarn. Package managers treat 0.x minor bumps as major and won’t use ast-types@0.14.x for react-docgen even on fresh installations. So even if this is just a minor version bump it still requires a new release.

In case anyone is interested in what this means, in your package.json just add a resolutions key like so

  "resolutions": {
    "ast-types": "^0.14.0"
  },