Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(examples): update examples #1550

Merged
merged 4 commits into from
Mar 23, 2023

Conversation

timofei-iatsenko
Copy link
Collaborator

@timofei-iatsenko timofei-iatsenko commented Mar 22, 2023

Description

  • nextjs-babel - updated, issues with SSR fixed, best practices implemented
  • nextjs-swc - created, it's diffrent than in SWC repo and differs from nextjs-babel just to show more concepts
  • js - deps updated
  • create-react-app - updated, fixed incompatibilities with react-scripts@v5

#1393

@vercel
Copy link

vercel bot commented Mar 22, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
js-lingui ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 22, 2023 at 4:33PM (UTC)

@github-actions
Copy link

github-actions bot commented Mar 22, 2023

size-limit report 📦

Path Size
./packages/core/build/esm/index.js 1.61 KB (0%)
./packages/detect-locale/build/esm/index.js 812 B (0%)
./packages/react/build/esm/index.js 1.59 KB (0%)
./packages/remote-loader/build/esm/index.js 7.25 KB (0%)

@codecov
Copy link

codecov bot commented Mar 22, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (2cb5175) 75.34% compared to head (bdb4741) 75.34%.

Additional details and impacted files
@@           Coverage Diff           @@
##             next    #1550   +/-   ##
=======================================
  Coverage   75.34%   75.34%           
=======================================
  Files          78       78           
  Lines        1971     1971           
  Branches      516      516           
=======================================
  Hits         1485     1485           
  Misses        375      375           
  Partials      111      111           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@andrii-bodnar andrii-bodnar merged commit cf19d51 into lingui:next Mar 23, 2023
@timofei-iatsenko timofei-iatsenko deleted the update-examples branch March 23, 2023 08:57
@andrii-bodnar andrii-bodnar linked an issue Mar 23, 2023 that may be closed by this pull request
12 tasks
@gpessa
Copy link

gpessa commented Apr 20, 2023

The solution is not working, we keep using the useEffect to activate the language. The problem with that is that useEffect is called only client side so in server side the page is rendered with the default language and not the right one

@tanwarvinay
Copy link

Is there any workaround to this ? Translations are not added to HTML on server. They are being added on Client Side.

@timofei-iatsenko
Copy link
Collaborator Author

@tanwarvinay check the latest examples in the repository carefully, it's working perfectly with SSR

@tanwarvinay
Copy link

tanwarvinay commented Oct 25, 2023

@thekip Thank you for the quick response. On my localhost i actually get translations on SSR but when i deploy my code on staging server than the poblem occurs.
I am also getting consistently following warning on my localhost -->

I18nProvider rendered null. A call to i18n.activate needs to happen in order for translations to be activated and for the I18nProvider to render.This is not an error but an informational message logged only in development.

My Implementation Example

./I18nProviderWrapper.js. // used in _app.js

import { useSelector } from 'react-redux';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';

import {
  loadLocales,
} from '~/i18n/utils/loadLocales';

const I18nProviderWrapper = ({ children }) => {
  const locale = useSelector((state) => state.globalData.locale);
  loadLocales(locale);
  return (
    <I18nProvider i18n={i18n} >
      {children}
    </I18nProvider>
  );
};

export default I18nProviderWrapper;

./loadlocales.js
import { i18n } from '@lingui/core';

export const loadLocales = async (locale) => {
  const { messages } = await import(
    `~/i18n/translations/${locale || 'en'}/messages.js`
  );
  i18n.load(locale, messages);
  i18n.activate(locale);
};

./html.js
import { Trans } from '@lingui/macro';
const Test = () => {
  return <Trans>Hello World </Trans>
}

The Above Code Works perfectly on my localhost (on build also) but gives the above stated warning. But does not work when staging server is used.

@andrii-bodnar
Copy link
Contributor

andrii-bodnar commented Oct 25, 2023

@tanwarvinay please make sure that the Lingui core, react, and macro packages are located in the dependencies and not in devDependencies

@timofei-iatsenko
Copy link
Collaborator Author

@tanwarvinay please use examples provided in this repo. Your integration is wrong. loadLocales in your case is async and not awaited anyhow in the react components, this is the root of your issue. The examples in the repo have full solution which battle tested on production on many websites.

@tanwarvinay
Copy link

@andrii-bodnar and @thekip you are a life saver. Thank you so much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Examples upgrade
4 participants