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

[vitexikora]

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)

[wtgtybhertgeghgtwtg]

foo?.bar is optional chaining, not nullish coalescing (which would be foo ?? bar).

[vitexikora]

Thats true, my bad.

[tricoder42]

@vitexikora Thanks! Could you please post your Lingui config?

[vitexikora]

package.json with lingui config: https://pastebin.com/arJkrSg1
(with config in .linguirc it was throwing errors ...)
.babelrc: https://pastebin.com/McUE57bn
webpack.config.js: https://pastebin.com/5uVhJdy3

[jbbr]

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

```bash
$ 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.