Typescript without React?

[RandomEngy]

There is a React Typescript sample, but it assumes you are using React. There is a Vanilla JS sample, but without TypeScript integration.

I'm a bit confused: do I need Babel? The React example doesn't seem to use it.

I have a minimal project set up here to attempt to get this running without React: https://github.com/RandomEngy/lingui-ts

However when I run lingui extract it errors out:

(node:38396) UnhandledPromiseRejectionWarning: TypeError: ext.match is not a function
    at _callee$ (C:\git\lingui-ts\node_modules\@lingui\cli\api\extractors\index.js:64:21)
    at tryCatch (C:\git\lingui-ts\node_modules\regenerator-runtime\runtime.js:63:40)
    at Generator.invoke [as _invoke] (C:\git\lingui-ts\node_modules\regenerator-runtime\runtime.js:294:22)
    at Generator.next (C:\git\lingui-ts\node_modules\regenerator-runtime\runtime.js:119:21)
    at asyncGeneratorStep (C:\git\lingui-ts\node_modules\@babel\runtime\helpers\asyncToGenerator.js:3:24)
    at _next (C:\git\lingui-ts\node_modules\@babel\runtime\helpers\asyncToGenerator.js:25:9)
    at C:\git\lingui-ts\node_modules\@babel\runtime\helpers\asyncToGenerator.js:32:7
    at new Promise (<anonymous>)
    at C:\git\lingui-ts\node_modules\@babel\runtime\helpers\asyncToGenerator.js:21:12
    at _extract (C:\git\lingui-ts\node_modules\@lingui\cli\api\extractors\index.js:129:19)

[RandomEngy]

I've gotten it a little bit further. It turns out the config I needed in package.json was "extractors": ["@lingui/cli/api/extractors/typescript"] . I've extracted the strings to .po files and compiled them to the message.ts file and have set up the initialization.

However, I've got a different error now when I try to build with webpack 5:

ERROR in ./node_modules/resolve/lib/sync.js 3:11-26
Module not found: Error: Can't resolve 'path' in 'C:\git\lingui-ts\node_modules\resolve\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

It looks like it's trying to call some node APIs that aren't available. It looks like lingui has Webpack 5 support so I'm not sure why this is broken.

I see Babel mentioned a lot in the docs but I'm not using Babel to create my JS; it's just done via ts-loader. I also tried adding in Babel, but nothing I tried worked and am unsure how it's supposed to be configured. Can anyone help me figure out what I've got wrong?

[RandomEngy]

Finally got it working, following steps in https://github.com/Microsoft/TypeScript-Babel-Starter . I had to abandon ts-loader and switch to babel-loader.

Also needed to npm i --save-dev @types/react as there was a type definition in @lingui/macro that was referencing React.

[RandomEngy]

Now I need to apply it to my project with yarn workspaces and Typescript project references. Before I would just compile with tsc -b but I can't do that with Babel. 😞

I'm wondering if at this point it might be easier to migrate to Lit so I can use their localization library. If anyone is using Lingui successfully with yarn workspaces let me know.

[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.

[RandomEngy]

Thanks, Stalebot. Anyway, I've given up on making lingui work. I have migrated to Lit and am using that their library instead.

[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.

[timofei-iatsenko]

Fixed in https://github.com/lingui/js-lingui/pull/1367 would be released as part of v4