Rendering a backslash from react-intl message when building with Webpack 1

Question

Summary

When I load my app using Webpack Dev Server, my messages show up fine: \. However when I bundle the application to disk and server the bundle via nginx, I see a duplication of my backslash: \\.

Details

I am using react-intl@2.2.3 (latest at this time) and babel-plugin-react-intl@2.3.1 (latest at this time.) My goal is to define a default message with a \ character and render it in any way (FormattedMessage, formatMessage, etc)

I am bundling my app using Webpack / Babel. I have no Babel / react-intl specific config in my webpack.config.js file, however I do use DefinePlugin to set process.env to 'development' or 'production'

When I load my app using Webpack Dev Server, my messages show up fine: \. However when I bundle the application to disk and serve the bundle via nginx, I see a duplication of my backslash: \\. I have following instructions here: https://github.com/yahoo/babel-plugin-react-intl/issues/13#issuecomment-151944191 with regard to using 4 \ characters to show a final \ character.

For what it is worth, I have tried using JSX strings, JS strings, using 1, 2, and 4 \ characters, and any other silly combinations I could think of.

Any tips or suggestions are greatly appreciated. Thank you.

Code samples

An example of how I define messages

import { defineMessages } from 'react-intl'


export default defineMessages({
  message: {
    id: 'anyId',
    defaultMessage: '\\\\',
  },
})

An example of how I might render my messages

<FormattedMessage { ...messages.anyID } /></span>

Another example, which also does not work

<FormattedMessage id='anyId' defaultMessage='\\' />

Yet another failing example:

<FormattedMessage id='anyId' defaultMessage={ '\\\\' } />

It's still broken, probably forever. Ember js even forked react-intl message formatter to fix it. One way to work around it is to use ╲ (\u2572) instead of a real backslash. — Gene S, Nov 16 '18 at 13:11

score 2 · Answer 1 · answered Jun 07 '19 at 15:07

Use the unicode character instead of the actual backslash. The backslash unicode is \u005C. So it would look like this to render one backslash:

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C',
        },
    })

or this if you wanted to render two backslashes in a row:

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C\u005C',
        },
    })

or this if you were just done with it ;)

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '¯\u005C_(ツ)_/¯',
        },
    })

the last code would render: ¯\_(ツ)_/¯

Rendering a backslash from react-intl message when building with Webpack 1

1 Answers1