CODEWITHSUNDEEP
webpackantd
Tom Naessens
Tom Naessens

Reputation: 1837

Antd locale is undefined

I'm trying to add a LocaleProvider to my app to put the antd components in English (instead of the default Chinese). I followed the following instructions from https://ant.design/components/locale-provider/ :

import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';

...

return <LocaleProvider locale={enUS}><App /></LocaleProvider>;

This however doesn't work: enUS is undefined. I have declared the Antd library as an external in my webpack config because I don't want to bundle the whole Antd library in my app.js, so I use a <script> tag in the <head>:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/2.11.0/antd-with-locales.js"></script>

Relevant part of my Webpack configurarion:

externals: {
    "react": "React",
    "react-dom": "ReactDOM",
    "antd": "antd"
}

When I try the second approach described on the LocaleProvider documentation:

const { LocaleProvider, locales } = window.antd;

...

return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

It works and my application is translated. But I don't like the mixture of "import styles".

So, my question is: What am I doing wrong? Why doesn't the first method work? Is this because of adding antd to the externals of my webpack config and if so, how can I solve this?

Upvotes: 3

Views: 4009

Answers (4)

sultan
sultan

Reputation: 4729

I spent more than 2 hours before I made it work on my side. Except the js import I had to configure webpack to decrease size of the bundle otherwise it was taking all the moment localization.

import React from 'react'
import ReactDOM from 'react-dom'
import {ConnectedRouter} from 'react-router-redux'
import {LocaleProvider} from 'antd'
import {Provider} from 'react-redux'
import configureStore from 'store'
import createHistory from 'history/createBrowserHistory'
import ruRU from 'antd/lib/locale-provider/ru_RU'
import App from 'containers/App'

const history = createHistory()
const store = configureStore(history)
const MOUNT_NODE = document.getElementById(`root`)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <LocaleProvider locale={ruRU}>
        <App/>
      </LocaleProvider>
    </ConnectedRouter>
  </Provider>,
  MOUNT_NODE
)

webpack:

...
plugins: [
  new ExtractTextPlugin({
    filename: `[name].css`,
    disable: false,
    allChunks: true
  }),
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/)
],
resolve: {
  modules: [`client`, `node_modules`],
  extensions: [`.js`, `.jsx`],
  mainFields: [
    `browser`,
    `jsnext:main`,
    `main`
  ],
  alias: {moment: `moment/moment.js`}
}
...

.babelc

plugins": [
  "flow-react-proptypes",
  "styled-components",
  ["import", {"libraryName": "antd", "style": "css"}]
]

Upvotes: 0

Deepak Mallah
Deepak Mallah

Reputation: 4076

This worked for me.

import LocaleProvider from 'antd/lib/locale-provider';
import enUS from 'antd/lib/locale-provider/en_US';

const { Content, Footer } = Layout;

const component = ({ children }) => (
  <LocaleProvider locale={enUS}>
    <Layout>
      <div>Hello work</div>
    </Layout>
  </LocaleProvider>
);

Upvotes: 0

Metro
Metro

Reputation: 1171

It may be related to webpack and typescript?

Here is the workaround for it:

// Original code in doc which will not work
//
// import enUS from 'antd/lib/locale-provider/en_US';
// ReactDOM.render(
//    (<LocaleProvider locale={enUS}>
//         <DatePicker />
//     </LocaleProvider>),
// document.getElementById('root'));
//
//
// WORKAROUND (for TypeScript)
//
// import everything instead of the defaults.
import * as enUS from 'antd/lib/locale-provider/en_US';

// cast 'enUS' to 'any' so that it can be passed to LocalProvider
// If you use es6, you probably don't need this
const enUSLocale: any = enUS;

ReactDOM.render(
    (<LocaleProvider locale={enUSLocale}>
        <DatePicker />
    </LocaleProvider>),
    document.getElementById('root'));

Upvotes: 4

Mark Moore
Mark Moore

Reputation: 395

@Silox, here is my entire client/main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import LocaleProvider from 'antd/lib/locale-provider';
import enUS from 'antd/lib/locale-provider/en_US';

import App from '/imports/components/app.js';

ReactDOM.render(
  <LocaleProvider locale={enUS}>
      <App />
  </LocaleProvider>,
  document.getElementById('container')
);

This works and correctly renders without the chinese glyphs.

FWIW, the online doc was problematic for me because it is so much in chinese. I had a little better luck with RTFC and the .md files in ./node_modules/antd/dist.

Upvotes: 2

Related Questions