fix i18n: lingui not work

src/components/Layout/Bread.js

@@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb } from 'antd'
 import { Link, withRouter } from 'umi'
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import iconMap from 'utils/iconMap'
 const { pathToRegexp } = require('path-to-regexp')
 import { queryAncestors } from 'utils'
@@ -44,7 +44,7 @@ class Bread extends PureComponent {
           routeList[0],
           {
             id: 404,
-            name: t`Not Found`,
+            name: i18n._('Not Found'),
           },
         ]
 

src/components/Layout/Header.js

@@ -8,7 +8,7 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
 } from '@ant-design/icons'
-import { Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { getLocale, setLocale } from 'utils'
 import dayjs from 'dayjs'
 import classnames from 'classnames'
@@ -38,16 +38,16 @@ class Header extends PureComponent {
         label: (
           <Fragment>
             <span style={{ color: '#999', marginRight: 4 }}>
-              <Trans>Hi,</Trans>
+              {i18n._('Hi,')}
             </span>
             <span>{username}</span>
             <Avatar style={{ marginLeft: 8 }} src={avatar} />
           </Fragment>
         ),
-        children: [
+            children: [
           {
             key: 'SignOut',
-            label: <Trans>Sign out</Trans>,
+            label: i18n._('Sign out'),
           },
         ],
       },
@@ -104,7 +104,7 @@ class Header extends PureComponent {
               itemLayout="horizontal"
               dataSource={notifications}
               locale={{
-                emptyText: <Trans>You have viewed all notifications.</Trans>,
+                emptyText: i18n._('You have viewed all notifications.'),
               }}
               renderItem={item => (
                 <List.Item className={styles.notificationItem}>
@@ -125,7 +125,7 @@ class Header extends PureComponent {
                 onClick={onAllNotificationsRead}
                 className={styles.clearButton}
               >
-                <Trans>Clear notifications</Trans>
+                {i18n._('Clear notifications')}
               </div>
             ) : null}
           </div>

src/components/Layout/Sider.js

@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Layout } from 'antd'
-import { t } from "@lingui/macro"
-import { Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { BulbOutlined } from '@ant-design/icons'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
@@ -58,7 +57,7 @@ class Sider extends PureComponent {
           <div className={styles.switchTheme}>
             <span>
               <BulbOutlined />
-              <Trans>Switch Theme</Trans>
+              {i18n._('Switch Theme')}
             </span>
             <Switch
               onChange={onThemeChange.bind(
@@ -66,8 +65,8 @@ class Sider extends PureComponent {
                 theme === 'dark' ? 'light' : 'dark'
               )}
               defaultChecked={theme === 'dark'}
-              checkedChildren={t`Dark`}
-              unCheckedChildren={t`Light`}
+              checkedChildren={i18n._('Dark')}
+              unCheckedChildren={i18n._('Light')}
             />
           </div>
         )}

src/layouts/index.js

@@ -4,7 +4,11 @@ import { ConfigProvider } from 'antd'
 import { i18n } from "@lingui/core"
 import { I18nProvider } from '@lingui/react'
 import { getLocale } from 'utils'
+import config from 'utils/config'
 import { zh, en, pt } from 'make-plural/plurals'
+import enMessages from '../locales/en/messages.json'
+import zhMessages from '../locales/zh/messages.json'
+import ptMessages from '../locales/pt-br/messages.json'
 import zhCN from 'antd/locale/zh_CN'
 import enUS from 'antd/locale/en_US'
 import ptBR from 'antd/locale/pt_BR'
@@ -17,6 +21,24 @@ i18n.loadLocaleData({
   'pt-br': { plurals: pt }
 })
 
+// Activate the default language synchronously so I18nProvider doesn't render `null` in dev.
+// Avoid activating the user-selected language here because its messages may not be loaded yet.
+const configuredDefault = (config && config.i18n && config.i18n.defaultLanguage) || 'en'
+const _catalogs = {
+  en: enMessages,
+  zh: zhMessages,
+  'pt-br': ptMessages,
+}
+try {
+  const initialCatalog = _catalogs[configuredDefault]
+  if (initialCatalog) {
+    i18n.load(configuredDefault, initialCatalog)
+  }
+  i18n.activate(configuredDefault)
+} catch (e) {
+  // ignore activation errors during bootstrap
+}
+
 // antd
 const languages = {
   zh: zhCN,
@@ -32,15 +54,23 @@ class Layout extends Component {
   }
 
   componentDidMount() {
+    let language = getLocale()
+    if (!languages[language]) language = configuredDefault
+    this.loadCatalog(language).catch(() => {})
   }
 
   loadCatalog = async (lan) => {
-    const catalog = await import(
-      `../locales/${lan}/messages.json`
-    )
+    const language = lan || i18n.defaultLanguage
+    try {
+      const catalogModule = await import(`../locales/${language}/messages.json`)
+      const catalog = catalogModule && catalogModule.default ? catalogModule.default : catalogModule
 
-    i18n.load(lan, catalog)
-    i18n.activate(lan)
+      i18n.load(language, catalog)
+      i18n.activate(language)
+    } catch (err) {
+      // If loading fails, fall back to default language and log a warning.
+      console.warn(`Failed to load messages for locale "${language}":`, err)
+    }
   }
 
   render() {
@@ -48,9 +78,7 @@ class Layout extends Component {
 
     let language = getLocale()
 
-    if (!languages[language]) language = defaultLanguage
-
-    this.loadCatalog(language)
+    if (!languages[language]) language = configuredDefault
 
     return (
       <ConfigProvider locale={languages[language]}>

src/pages/index.js

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Redirect } from 'umi'
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 
 class Index extends PureComponent {
   render() {
-    return <Redirect to={t`/dashboard`} />
+    return <Redirect to={i18n._('/dashboard')} />
   }
 }
 

src/pages/login/index.js

@@ -4,7 +4,7 @@ import { connect } from 'umi'
 import { Button, Row, Input, Form } from 'antd'
 import { GlobalFooter } from 'components'
 import { GithubOutlined } from '@ant-design/icons'
-import { t, Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { setLocale } from 'utils'
 import config from 'utils/config'
 
@@ -54,11 +54,12 @@ class Login extends PureComponent {
             <FormItem name="username" 
               rules={[{ required: true }]} hasFeedback>
                 <Input
-                  placeholder={t`Username`}
+                  placeholder={i18n._('Username')}
+                  autoComplete="username"
                 />
             </FormItem>
             <FormItem name="password" rules={[{ required: true }]} hasFeedback>
-              <Input type='password' placeholder={t`Password`} required />
+              <Input type="password" placeholder={i18n._('Password')} required autoComplete="current-password" />
             </FormItem>
             <Row>
               <Button
@@ -66,15 +67,15 @@ class Login extends PureComponent {
                 htmlType="submit"
                 loading={loading.effects.login}
               >
-                <Trans>Sign in</Trans>
+                {i18n._('Sign in')}
               </Button>
               <p>
                 <span className="margin-right">
-                  <Trans>Username</Trans>
+                  {i18n._('Username')}
                   ：guest
                 </span>
                 <span>
-                  <Trans>Password</Trans>
+                  {i18n._('Password')}
                   ：guest
                 </span>
               </p>

src/pages/post/components/List.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import { Table, Avatar } from 'antd'
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { Ellipsis } from 'components'
 import styles from './List.less'
 
@@ -9,12 +9,12 @@ class List extends PureComponent {
     const { ...tableProps } = this.props
     const columns = [
       {
-        title: t`Image`,
+        title: i18n._('Image'),
         dataIndex: 'image',
         render: text => <Avatar shape="square" src={text} />,
       },
       {
-        title: t`Title`,
+        title: i18n._('Title'),
         dataIndex: 'title',
         render: text => (
           <Ellipsis tooltip length={30}>
@@ -23,31 +23,31 @@ class List extends PureComponent {
         ),
       },
       {
-        title: t`Author`,
+        title: i18n._('Author'),
         dataIndex: 'author',
       },
       {
-        title: t`Categories`,
+        title: i18n._('Categories'),
         dataIndex: 'categories',
       },
       {
-        title: t`Tags`,
+        title: i18n._('Tags'),
         dataIndex: 'tags',
       },
       {
-        title: t`Visibility`,
+        title: i18n._('Visibility'),
         dataIndex: 'visibility',
       },
       {
-        title: t`Comments`,
+        title: i18n._('Comments'),
         dataIndex: 'comments',
       },
       {
-        title: t`Views`,
+        title: i18n._('Views'),
         dataIndex: 'views',
       },
       {
-        title: t`Publish Date`,
+        title: i18n._('Publish Date'),
         dataIndex: 'date',
       },
     ]
@@ -57,7 +57,7 @@ class List extends PureComponent {
         {...tableProps}
         pagination={{
           ...tableProps.pagination,
-          showTotal: total => t`Total ${total} Items`,
+          showTotal: total => i18n._('Total {total} Items', { total }),
         }}
         bordered
         scroll={{ x: 1200 }}

src/pages/post/index.js

@@ -4,7 +4,7 @@ import { connect } from 'umi'
 import { Tabs } from 'antd'
 import { history } from 'umi'
 import { stringify } from 'qs'
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { Page } from 'components'
 import List from './components/List'
 
@@ -66,12 +66,12 @@ class Post extends PureComponent {
           items={[
             {
               key: String(EnumPostStatus.PUBLISHED),
-              label: t`Publised`,
+              label: i18n._('Publised'),
               children: <List {...this.listProps} />,
             },
             {
               key: String(EnumPostStatus.UNPUBLISH),
-              label: t`Unpublished`,
+              label: i18n._('Unpublished'),
               children: <List {...this.listProps} />,
             },
           ]}

src/pages/request/index.js

@@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config'
 import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
 import classnames from 'classnames'
 import { CloseOutlined } from '@ant-design/icons'
-import { Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import api from '@/services/api'
 import { Page } from 'components'
 
@@ -189,7 +189,7 @@ class RequestPage extends React.Component {
                   onClick={this.handleVisible}
                   size="large"
                 >
-                  <Trans>Params</Trans>
+                  {i18n._('Params')}
                 </Button>
               </InputGroup>
 
@@ -199,7 +199,7 @@ class RequestPage extends React.Component {
                 style={{ width: 100 }}
                 onClick={this.handleRequest}
               >
-                <Trans>Send</Trans>
+                {i18n._('Send')}
               </Button>
             </Row>
             <Form ref={this.formRef} name="control-ref" >
@@ -242,7 +242,7 @@ class RequestPage extends React.Component {
 
                 <Row style={{ marginTop: 8 }}>
                   <Button onClick={this.handleAddField}>
-                    <Trans>Add Param</Trans>
+                    {i18n._('Add Param')}
                   </Button>
                 </Row>
               </div>

src/pages/user/components/Filter.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import dayjs from 'dayjs'
 import { FilterItem } from 'components'
-import { Trans } from "@lingui/macro"
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
@@ -84,9 +83,9 @@ class Filter extends Component {
           <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
             <Form.Item name="name">
               <Search
-                placeholder={t`Search Name`}
-                onSearch={this.handleSubmit}
-              />
+                  placeholder={i18n._('Search Name')}
+                  onSearch={this.handleSubmit}
+                />
             </Form.Item>
           </Col>
           <Col
@@ -99,7 +98,7 @@ class Filter extends Component {
               <Cascader
                 style={{ width: '100%' }}
                 options={city}
-                placeholder={t`Please pick an address`}
+                placeholder={i18n._('Please pick an address')}
               />
             </Form.Item>
           </Col>
@@ -110,7 +109,7 @@ class Filter extends Component {
             sm={{ span: 12 }}
             id="createTimeRangePicker"
           >
-            <FilterItem label={t`CreateTime`}>
+            <FilterItem label={i18n._('CreateTime')}>
               <Form.Item name="createTime">
                 <RangePicker
                   style={{ width: '100%' }}
@@ -131,14 +130,14 @@ class Filter extends Component {
                   className="margin-right"
                   onClick={this.handleSubmit}
                 >
-                  <Trans>Search</Trans>
+                  {i18n._('Search')}
                 </Button>
                 <Button onClick={this.handleReset}>
-                  <Trans>Reset</Trans>
+                  {i18n._('Reset')}
                 </Button>
               </div>
               <Button type="ghost" onClick={onAdd}>
-                <Trans>Create</Trans>
+                {i18n._('Create')}
               </Button>
             </Row>
           </Col>

src/pages/user/components/List.js

@@ -2,8 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Table, Modal, Avatar } from 'antd'
 import { DropOption } from 'components'
-import { t } from "@lingui/macro"
-import { Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { Link } from 'umi'
 import styles from './List.less'
 
@@ -17,7 +16,7 @@ class List extends PureComponent {
       onEditItem(record)
     } else if (e.key === '2') {
       confirm({
-        title: t`Are you sure delete this record?`,
+        title: i18n._('Are you sure delete this record?'),
         onOk() {
           onDeleteItem(record.id)
         },
@@ -30,7 +29,7 @@ class List extends PureComponent {
 
     const columns = [
       {
-        title: <Trans>Avatar</Trans>,
+        title: i18n._('Avatar'),
         dataIndex: 'avatar',
         key: 'avatar',
         width: '7%',
@@ -38,51 +37,51 @@ class List extends PureComponent {
         render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
       },
       {
-        title: <Trans>Name</Trans>,
+        title: i18n._('Name'),
         dataIndex: 'name',
         key: 'name',
         render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
       },
       {
-        title: <Trans>NickName</Trans>,
+        title: i18n._('NickName'),
         dataIndex: 'nickName',
         key: 'nickName',
       },
       {
-        title: <Trans>Age</Trans>,
+        title: i18n._('Age'),
         dataIndex: 'age',
         width: '6%',
         key: 'age',
       },
       {
-        title: <Trans>Gender</Trans>,
+        title: i18n._('Gender'),
         dataIndex: 'isMale',
         key: 'isMale',
         width: '7%',
-        render: text => <span>{text ? 'Male' : 'Female'}</span>,
+        render: text => <span>{text ? i18n._('Male') : i18n._('Female')}</span>,
       },
       {
-        title: <Trans>Phone</Trans>,
+        title: i18n._('Phone'),
         dataIndex: 'phone',
         key: 'phone',
       },
       {
-        title: <Trans>Email</Trans>,
+        title: i18n._('Email'),
         dataIndex: 'email',
         key: 'email',
       },
       {
-        title: <Trans>Address</Trans>,
+        title: i18n._('Address'),
         dataIndex: 'address',
         key: 'address',
       },
       {
-        title: <Trans>CreateTime</Trans>,
+        title: i18n._('CreateTime'),
         dataIndex: 'createTime',
         key: 'createTime',
       },
       {
-        title: <Trans>Operation</Trans>,
+        title: i18n._('Operation'),
         key: 'operation',
         fixed: 'right',
         width: '8%',
@@ -91,8 +90,8 @@ class List extends PureComponent {
             <DropOption
               onMenuClick={e => this.handleMenuClick(record, e)}
               menuOptions={[
-                { key: '1', name: t`Update` },
-                { key: '2', name: t`Delete` },
+                { key: '1', name: i18n._('Update') },
+                { key: '2', name: i18n._('Delete') },
               ]}
             />
           )
@@ -105,7 +104,7 @@ class List extends PureComponent {
         {...tableProps}
         pagination={{
           ...tableProps.pagination,
-          showTotal: total => t`Total ${total} Items`,
+          showTotal: total => i18n._('Total {total} Items', { total }),
         }}
         className={styles.table}
         bordered

src/pages/user/components/Modal.js

@@ -1,9 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Trans } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import city from 'utils/city'
-import { t } from "@lingui/macro"
 
 const FormItem = Form.Item
 
@@ -43,41 +42,41 @@ class UserModal extends PureComponent {
       <Modal {...modalProps} onOk={this.handleOk}>
         <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
           <FormItem name='name' rules={[{ required: true }]}
-            label={t`Name`} hasFeedback {...formItemLayout}>
+            label={i18n._('Name')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='nickName' rules={[{ required: true }]}
-            label={t`NickName`} hasFeedback {...formItemLayout}>
+            label={i18n._('NickName')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='isMale' rules={[{ required: true }]}
-            label={t`Gender`} hasFeedback {...formItemLayout}>
+            label={i18n._('Gender')} hasFeedback {...formItemLayout}>
             <Radio.Group>
               <Radio value>
-                <Trans>Male</Trans>
+                {i18n._('Male')}
               </Radio>
               <Radio value={false}>
-                <Trans>Female</Trans>
+                {i18n._('Female')}
               </Radio>
             </Radio.Group>
           </FormItem>
-          <FormItem name='age' label={t`Age`} hasFeedback {...formItemLayout}>
+          <FormItem name='age' label={i18n._('Age')} hasFeedback {...formItemLayout}>
             <InputNumber min={18} max={100} />
           </FormItem>
-          <FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: t`The input is not valid phone!`, }]}
-            label={t`Phone`} hasFeedback {...formItemLayout}>
+          <FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: i18n._('The input is not valid phone!'), }]}
+            label={i18n._('Phone')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: t`The input is not valid E-mail!`, }]}
-            label={t`Email`} hasFeedback {...formItemLayout}>
+          <FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n._('The input is not valid E-mail!'), }]}
+            label={i18n._('Email')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='address' rules={[{ required: true, }]}
-            label={t`Address`} hasFeedback {...formItemLayout}>
+            label={i18n._('Address')} hasFeedback {...formItemLayout}>
             <Cascader
               style={{ width: '100%' }}
               options={city}
-              placeholder={t`Pick an address`}
+              placeholder={i18n._('Pick an address')}
             />
           </FormItem>
         </Form>

src/pages/user/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { history } from 'umi'
 import { connect } from 'umi'
 import { Row, Col, Button, Popconfirm } from 'antd'
-import { t } from "@lingui/macro"
+import { i18n } from '@lingui/core'
 import { Page } from 'components'
 import { stringify } from 'qs'
 import List from './components/List'
@@ -58,7 +58,7 @@ class User extends PureComponent {
       mask: { closable: false },
       confirmLoading: loading.effects[`user/${modalType}`],
       title: `${
-        modalType === 'create' ? t`Create User` : t`Update User`
+        modalType === 'create' ? i18n._('Create User') : i18n._('Update User')
       }`,
       centered: true,
       onOk: data => {

src/utils/index.js

@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash'
 const { pathToRegexp } = require("path-to-regexp")
 import store from 'store'
-import { i18n } from './config'
+import { i18n } from '@lingui/core'
 
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -14,8 +14,8 @@ export config from './config'
 export request from './request'
 export { Color } from './theme'
 
-export const languages = i18n ? i18n.languages.map(item => item.key) : []
-export const defaultLanguage = i18n ? i18n.defaultLanguage : ''
+export const languages = i18n && i18n.languages ? i18n.languages.map(item => item.key) : []
+export const defaultLanguage = i18n && i18n.defaultLanguage ? i18n.defaultLanguage : 'en'
 
 /**
  * Query objects that specify keys and values in an array where all values are objects.