How to use react-intl v2 + webpack to load locale file?

Question

I have a setup to use webpack to manage all my assets. it works fine. Now I plan to use react-intl version 2 to support multiple languages.

I have managed to make components defined in package 'react-intl' work,

import {IntlProvider, FormattedNumber, FormattedPlural} from 'react-intl'; 

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        name       : 'Eric',
        unreadCount: 1000,
    };
}

render() {
    const {name, unreadCount} = this.state;

    return (
        <p>
            Hello <b>{name}</b>, you have {' '}
            <FormattedNumber value={unreadCount} /> {' '}
            <FormattedPlural value={unreadCount}
                one="message"
                other="messages"
            />.
        </p>
    );
    }
}

But I can't figure out what's the correct way to load locale file through webpack and refer them in component. Since the package has breaking upgrade recently, there is no much documentation about it either. the wiki page is empty for now

https://github.com/yahoo/react-intl/wiki

I wonder What's the correct way to do this?

score 0 · Answer 1 · answered Mar 29 '16 at 23:38

xiopang, I just wrote a webpack plugin based around the translations example from react-intl v2. Hopefully it works for you: https://gist.github.com/marr/95f7a8a3f5529e7e668048548198b9eb

the webpack config plugins then look like:

new TranslateWebpackPlugin(),
new HtmlWebpackPlugin({
  template: 'index.hbs', // Load a custom template
  inject: 'body', // Inject all scripts into the body
  chunks: [ 'app' ],
  app: true
}),

and index.hbs:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      window.App = <%= htmlWebpackPlugin.options.app %>
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

How to use react-intl v2 + webpack to load locale file?

1 Answers1