Examples upgrade

[andrii-bodnar]

The examples are extremely outdated and need to be upgraded

• create-react-app
• js
• nextjs-babel
• nextjs-swc
• vite-react-babel
• React Native
• vite-swc
• Next.js App router (NextJS App Router and RSC Support path #1698)
• Remix (Remix examples? #1618)
• Vue.js (Support Vue with the same DX than React #1730)
• Astro
• Jest (Catalogs' mocking)

[timofei-iatsenko]

• Also we should create 2 examples for next-js (with and without SWC)
• Add an example with Jest (show how to mock out catalogs)
• add example with Vite (with vite-react-plugin and without)

[andrii-bodnar]

Also we should create 2 examples for next-js (with and without SWC)

We have without SWC - js-lingui/examples/next-js, with SWC - swc-plugin/examples/nextjs-13, isn't it?

[timofei-iatsenko]

Correct, but it is hard to discover when they exist in two different repos, and it's hard to understand a difference between them.

I would suggest:

create two folders with distinctive name:
examples/next-js-with-babel
examples/next-js-with-swc

And either move nextjs example from SWC repo to here, or create in examples/next-js-with-swc just a readme file with reference to swc-plugin repo example.

It's quite handy when you have all examples in one place, like there https://github.com/vercel/next.js/tree/canary/examples

Also nextjs example in the main repo is broken. Here i posted an explanation #1265

[andrii-bodnar]

Yeah, it's better to have all the examples in one place and additionally we should consider adding a small section with the links so users will be able to easily find all these examples.

[andrii-bodnar]

https://github.com/vercel/next.js/tree/canary/examples/with-lingui

[bafxyz]

I would be happy to see at least one working example with nodejs, typescript and extract parser. So far could not find anything, or lingui is not intended to work with nodejs without hacks?

[timofei-iatsenko]

@bafxyz if you accepting to use babel or swc for precompiling you backend code, everything should work without any hacks. but bear in mind that lingui is made mostly for frontend code and some solutions might be overengenireed for backend code.

[bafxyz]

Yes it works perfectly fine with nextjs for me, but at the same time i could not make it work in nodejs. Would be great to see codesandbox with swc, typescript

[timofei-iatsenko]

the nodejs example is too wide. it all depends on the frameworks you use. For example, nestjs and express would be completely different examples.

[bafxyz]

I'm not using any frameworks. Pure nodejs BE written in typescript which i'm running with https://www.npmjs.com/package/tsx but parser can be replaced with swc it's not a problem. I was writing simple bot for telegram messenger and because of my love to PO file format i tried to use lingui. But yeah, it was not easy to find some examples

[gpessa]

I would be happy to see at least one working example with nodejs, typescript and extract parser. So far could not find anything, or lingui is not intended to work with nodejs without hacks?

@andrii-bodnar
Are we sure that with this example the server side page is generated?
It use useEffect which only called on the client side.

[timofei-iatsenko]

@gpessa that's why this task exists. It has to be updated.

[cbratschi]

Is there a Next.js App Router example?

[bafxyz]

Is there a Next.js App Router example?

Try this one https://github.com/sultan99/next.js-v13

[cbratschi]

@bafxyz thanks, trying it right now. Just failed with adapting the SWC example code.

[cbratschi]

Well, if I use a client component, the following error occurs:

./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js:9:0
Module not found: Can't resolve 'fs'

And in case of a server component, t is not defined as a function.

Is this supposed to support both cases? At least the middleware checks both cases and the used provider should also support it but the lingui code fails.

[timofei-iatsenko]

@cbratschi that means you're trying to use Macro without actual transpiling Macro. To use macro you have to use either babel-plugin-macros or @lingui/swc-plugin

[cbratschi]

@thekip thanks, the SWC plugin works fine for client components (first failed but after switching to server component and back to client component suddenly was working).

Are Server Components supported too? I am getting a useContext() error.

[Collinbrown95]

Would an example with RSpack be useful?

I made a separate issue for this (#1749), but this issue might be more appropriate (in which case I can close #1749 in favour of this one).

[sohamnandi77]

@thekip , please add some turborepo + vite + react examples as well, monorepo docs are not much clear