Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 16 22:35
    janicduplessis edited #578
  • Oct 16 22:33
    janicduplessis edited #578
  • Oct 16 22:33
    janicduplessis opened #578
  • Oct 14 07:40
    tricoder42 edited #577
  • Oct 14 07:39
    tricoder42 milestoned #577
  • Oct 14 07:39
    tricoder42 edited #577
  • Oct 14 07:38
    tricoder42 edited #334
  • Oct 14 07:32
    tricoder42 edited #334
  • Oct 14 07:32
    tricoder42 labeled #577
  • Oct 14 07:32
    tricoder42 labeled #577
  • Oct 14 07:32
    tricoder42 labeled #577
  • Oct 14 07:32
    tricoder42 opened #577
  • Oct 14 07:07
    tricoder42 edited #334
  • Oct 12 20:42
    tricoder42 edited #576
  • Oct 12 20:42
    tricoder42 opened #576
  • Oct 12 20:42
    tricoder42 labeled #576
  • Oct 12 20:42
    tricoder42 assigned #576
  • Oct 12 20:42
    tricoder42 labeled #576
  • Oct 12 20:42
    tricoder42 labeled #576
  • Oct 12 20:42
    tricoder42 labeled #576
Tomáš Ehrlich
@tricoder42
@simonkoener66 Have you tried to escape curly braces? Please enter a value between '{0}' and '{1}'.
simonkoener66
@simonkoener66
@tricoder42 That didn't work unfortunately...
For now I'm using this workaround: i18n._('Please enter a value between {value1} and {value2}.', { value1: '{0}', value2: '{1}' })
This works but doesn't look that good
An Nguyen
@dephiros
I added the answer for @simonkoener66 's question here for any others who is interested. This is used to translate messages for jquery.validator. The original message is jquery.validator.format("Please enter a value between {0} and {1}."). We solve it by changing the whole things to:
(minVal, maxVal) => i18n.(t`Please enter a value between {minVal}  and {maxVal}.`)
Cezar Neaga
@cezarneaga

hi everyone, i am having troubles with something:
i have an object

const messages = { everyMinutes: t('cronjobs.everyMinutes')`Every {count} minutes`,...}

and when using it:

{i18n._(messages.everyMinutes, { count: option.count })}

i get this error: values is not defined

Cezar Neaga
@cezarneaga
am i doing something wrong?
this is one last thing and i would have successfully migrate the app from react-intl
it would so suck if i cant get this to work :(
Cezar Neaga
@cezarneaga
hi @tricoder42, do you have any suggestion for me?
Tomáš Ehrlich
@tricoder42
@cezarneaga Hi, I think this pattern doesn't work at the moment. t macro is transformed into a message decsriptor, which is an object { id, values, defaults }. When i18n._ method sees an object as a first parameter, it reads values from it.
What you could do, although it's a bit hackish, is {i18n._(messages.everyMinutes.id, { count: option.count })} (mind the .id after the message)
Let me know if it works!
There's open discussion for new macros here: https://github.com/lingui/js-lingui/pull/479#issuecomment-484422604
I should finally have more free time in following weeks. I want to make a simple next.js app and test the v3 version on it. Unfortunately I no longer have any production apps with LinguiJS and this is the only way how to finish the v3 in meaningful way...
Cezar Neaga
@cezarneaga
hey, thanks Tomáš @tricoder42: your suggestion lead me to the solution: {i18n._(messages.everyMinutes.values, { count: option.count })}
any reason why you switched from lingui in your other apps that i should also consider? :)
Tomáš Ehrlich
@tricoder42
No reason, I just don't have any active project with i18n :/
i18n._(messages.everyMinutes.values, { count: option.count }), this really works?
@cezarneaga could you please make a small example with this pattern? I honestly don't understand how this works :)
Cezar Neaga
@cezarneaga
sorry, i meant i18n._(messages.everyMinutes.defaults, { count: option.count })
Cezar Neaga
@cezarneaga
Does anyone else have an invariant violation 130 with a typescript setup in production? Code works fine in dev
I am totally lost on what to do next. Tried everything i could think of.
Cezar Neaga
@cezarneaga

after 26 hours debugging, i have a solution. it seems webpack was at fault. the configuration for optimisation and the combo with lingui was not working. dont do this:

splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },

instead, do this:

splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendor',
          chunks: 'initial',
          minChunks: 2,
        },
      },
    },
Cezar Neaga
@cezarneaga

quick question: is there a way to add markup in plurals? eg:

<Plural
        value={availableCertificates}
        _0="No certificates."
        _1="you have <b>{availableCertificates}</b> certificate"
        other="you have <b>{availableCertificates}</b> certificates"
      />

@tricoder42

Tomáš Ehrlich
@tricoder42
Yeah, you should be able to use Trans tag: _1={<Trans>you have <b>{availableCertificates}</b> certificate</Trans>}. If it creates an extra wrapping <0> element inside your translation, try fragment instead (<>). I believe there was some problem, but I'm not sure. It should work though! If not, I'm gonna fix it in next version.
regarding the webpack config: I have no clue what might cause the problem :/ I've never seen such config.
Cezar Neaga
@cezarneaga
@tricoder42 thanks. worked by wrapping in <></>
Ovaideanu
@Ovaideanu
Hello, I cloned lingui repo, change to next branch and ran node lingui.js extract command inside build/packages/cli but I get this error SyntaxError: Unexpected token export. Can you give me some hints how to solve this? Thanks
Daniel K.
@FredyC
@Ovaideanu Why don't you install from NPM?
NodeJS does not support ESM out of the box (yet) so you need a transpiled version, not the source
Ovaideanu
@Ovaideanu
@FredyC My company needs a feature like the one described in lingui/js-lingui#510 so I followed the steps to install from https://github.com/lingui/js-lingui/blob/master/CONTRIBUTING.md . Can I use the transpiled version for this?
Daniel K.
@FredyC
@Ovaideanu sure I guess, you just need to yarn release:build to make transpiled version
Jochem Nabuurs
@jochienabuurs

Hi guys, I've been breaking my head over the dynamic import of catalog files for a few hours now and i'd really appriciate your help.

I'm doing something like this:

const getCatalog = async (lang: string): Promise<Catalog> =>
    import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */ `./locales/${lang}/messages.js`)

const App = ({ storeView, uri, appRoutes, language = 'en' }: Props) => {
    const [catalogs, setCatalogs] = React.useState()

    React.useEffect(() => {
        getCatalog(language).then(cat => {
            const catalog = { [language]: cat }
            setCatalogs(catalog)
            i18n.load(catalog)
            i18n.activate(language)
        })
    }, [language])

    if (!catalogs) return null

In particular, its the "import" line that i'm having issues with.
The above code works perfect, but it uses compiled version of the catalogs which is not what i want for dev environment.
But when i use the loader like this:
import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */@lingui/loader!./locales/${lang}/messages.json)

I get back a catalog with empty messages...

Daniel K.
@FredyC
@jochienabuurs I am using this code and works perfectly...
async function loadCatalog(lang: string) {
  let catalog: Catalog
  if (process.env.NODE_ENV !== 'production') {
    // prettier-ignore
    catalog = await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `@lingui/loader!./locale/${lang}/messages.po`
    )
  } else {
    // prettier-ignore
    catalog = await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `./locale/${lang}/messages.js`
    )
  }
  i18n.load({ [lang]: catalog })
}
Jochem Nabuurs
@jochienabuurs
@FredyC yeah it should work ... i've used the above in a default create-react-app and that works
so my best guess is that something is wrong with webpack
Daniel K.
@FredyC
I kinda doubt about that, especially in case of CRA ... unless you use some way to modify webpack config
Jochem Nabuurs
@jochienabuurs
could it be that it's a config issue with .linguirc
the config that @lingui/loader uses is this:
{ localeDir: 'src/locales/',
  sourceLocale: 'my',
  fallbackLocale: 'my',
  pseudoLocale: '',
  srcPathDirs: [ 'src/' ],
  srcPathIgnorePatterns: [ '/node_modules/' ],
  format: 'minimal',
  rootDir:
   '/Users/jochemnabuurs/Sites/justbrands-v2/frontend/packages/components',
  extractBabelOptions: { plugins: [], presets: [] },
  compileNamespace: 'cjs' }
{ localeDir: 'src/locales/',
  sourceLocale: 'my',
  fallbackLocale: 'my',
  pseudoLocale: '',
  srcPathDirs: [ 'src/' ],
  srcPathIgnorePatterns: [ '/node_modules/' ],
  format: 'minimal',
  rootDir:
   '/Users/jochemnabuurs/Sites/justbrands-v2/frontend/packages/components',
  extractBabelOptions: { plugins: [], presets: [] },
  compileNamespace: 'cjs' }
{ localeDir: 'src/locales/',
  sourceLocale: 'my',
  fallbackLocale: 'my',
  pseudoLocale: '',
  srcPathDirs: [ 'src/' ],
  srcPathIgnorePatterns: [ '/node_modules/' ],
  format: 'minimal',
  rootDir:
   '/Users/jochemnabuurs/Sites/justbrands-v2/frontend/packages/components',
  extractBabelOptions: { plugins: [], presets: [] },
  compileNamespace: 'cjs' }
{ localeDir: 'src/locales/',
  sourceLocale: 'my',
  fallbackLocale: 'my',
  pseudoLocale: '',
  srcPathDirs: [ 'src/' ],
  srcPathIgnorePatterns: [ '/node_modules/' ],
  format: 'minimal',
  rootDir:
   '/Users/jochemnabuurs/Sites/justbrands-v2/frontend/packages/components',
  extractBabelOptions: { plugins: [], presets: [] },
  compileNamespace: 'cjs' }
Tomáš Ehrlich
@tricoder42
await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `@lingui/loader!./locale/${lang}/messages.po`
    )
Should be fine both for development and production. @lingui/loader compiles messages on the fly. In development, it just cache them and re-compile on change. In production, it's done only once at build and then it just loads i18n-[index].js files.
@Ovaideanu Try to run babel-node index.js extract. It's not perfect, but you certainly can't run untranspiled files with node. I usually try test most of the code in unit tests and then run final tests in examples directory after I build the packages. I wish I knew a better way
Jochem Nabuurs
@jochienabuurs
@tricoder42 i've figured out what is going wrong. I suppose it's because of my project setup, which is a yarn workspaces based monorepo
But after some investigation, i've figured out that the getLocales function inside the cli/api/catalog.js does not return any value
its just an empty array
the function uses _glob2.default.sync(pattern) to search for files, but apparently that's not working correct with my setup. I'm no expert on this, so maybe you know whats going on?
Jochem Nabuurs
@jochienabuurs
NVM <rootDir> was missing in .linguirc
Josip Bojčić
@jbojcic1

Hi all. I started using lingui recently in my React project and it is great. However, I have a problem with using date macro inside t macro. I have a date that I need to translate outside of the component so based on https://lingui.js.org/ref/macro.html#jsmacro-t I tried to do:

const today = new Date();
const msg = i18n._(t`Today is ${date(today)}`);

and then in my component I am rendering msg <div>{msg}</div>
but I am getting: Today is [object Object]

am I doing something wrong or perhaps, somebody else had a similar issue?
Thx.

Josip Bojčić
@jbojcic1
here is the example in codesandbox - https://codesandbox.io/s/linguijs-playground-5gk1u
Mike Williamson
@sleepycat
Is there an example of a language switcher with Hooks?