Extract chokes on "obj?.function" (optional-chaining + "function" attribute)

Describe the bug Cannot parse source code containing a optional chaining followed by an attribute name “function”.

To Reproduce

export default function App() {
   return news.author?.function // fails
  // news.author?.['function'] is OK
  // news.author.function is also OK
}

SyntaxError: src\containers\news\NewsDetail.js: Unexpected token (68:45)

  66 |       authorAvatarUrl={null}
  67 |       authorFullName={news.author?.fullName}
> 68 |       authorFunction={news.author?.function}
     |                                              ^
  69 |       categoryName={news.category?.name}
  70 |       categoryColorObject={news.category?.color}
  71 |       content={news.content}
    at _class.raise (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:4051:15)
    at _class.unexpected (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:5382:16)
    at _class.jsxParseIdentifier (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3527:14)
    at _class.jsxParseNamespacedName (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3537:23)
    at _class.jsxParseAttribute (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3620:24)
    at _class.jsxParseOpeningElementAfterName (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3641:30)
    at _class.jsxParseOpeningElementAt (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3634:19)
    at _class.jsxParseElementAt (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3666:33)
    at _class.jsxParseElement (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3735:19)
    at _class.parseExprAtom (node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:3742:21)

Expected behavior To work

Additional context js-lingui 2.7.2 @babel/plugin-proposal-optional-chaining (plugin included in extractBabelOptions)

[jthomaschewski]

Sorry for the spam, I found the reason for this issue and it’s likely unrelated. I’m using typescript and lingui-cli is using typescript for parsing typescript files (not babel, which would be possible as well nowadays).

But lingui is using it’s own typescript dependency which is Typescript 2.x and doesn’t support optional chaining. I would have expected it to use typescript as a peer dependency instead. To workaround this issue I forced typescript to be resolved with by intended version in package.json:

  "devDependencies": {
    "typescript": "=3.7.0-beta"
  },
  "resolutions": {
    "typescript": "=3.7.0-beta"
  }

Now lingui extracts uses the same Typescript version as my project and extraction works fine.

I have the same issue, since TypeScript 3.7 beta+ includes this feature, it’s gaining popularity.

@vitexikora have you found a solution for this problem?

I would have expected this to work since lingui extract uses babel anyway. Maybe this plugin for some reason doesn’t work with babel-bridge compatibility package…

EDIT: I experience this issue for any optional chaining statements within typescript files, e.g:

const f: { a?: { b: number } } = {}
const b = f.a?.b

$ lingui extract
/project/node_modules/@lingui/cli/api/compat.js:56
        throw e;
        ^

SyntaxError: /project/file.tsx: Unexpected token (127:32)

  125 |                 }
  126 |                 const f = {};
> 127 |                 const b = f.a ? .b
      |                                 ^
  128 |                     :
  129 |                 ;
    at Object.raise (/project/node_modules/@babel/parser/lib/index.js:6420:17)
    at Object.unexpected (/project/node_modules/@babel/parser/lib/index.js:7773:16)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.