Skip to content

Commit

Permalink
Add example for polyfilling DOMParser in Node
Browse files Browse the repository at this point in the history
This change updates the README of the `react-intl` example to show how to use
the FormattedHTMLMessage component from `react-intl` in Node environments when
using pre-v4 versions.
  • Loading branch information
fabianishere committed Mar 30, 2020
1 parent e4bf0d4 commit 4e9d4d9
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 0 deletions.
13 changes: 13 additions & 0 deletions examples/with-react-intl/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,17 @@ $ npm start

You can then switch your browser's language preferences to French and refresh the page to see the UI update accordingly.

### FormattedHTMLMessage support (react-intl pre-v4)

Out of the box, this example does not support the use of the `FormattedHTMLMessage` component on the server due to `DOMParser` not being present in a Node environment.
This functionality is deprecated and has been removed as of react-intl 4.0
If you still want to enable this feature, you should install a `DOMParser` implementation (e.g. `xmldom` or `jsdom`) and enable the polyfill in `server.js`:

```js
// Polyfill Node with `DOMParser` required by formatjs.
// See: https://github.com/zeit/next.js/issues/10533
const { DOMParser } = require('xmldom')
global.DOMParser = DOMParser
```

[react intl]: https://github.com/yahoo/react-intl
6 changes: 6 additions & 0 deletions examples/with-react-intl/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ const IntlPolyfill = require('intl')
Intl.NumberFormat = IntlPolyfill.NumberFormat
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat

// Polyfill DOMParser for **pre-v4** react-intl used by formatjs.
// Only needed when using FormattedHTMLMessage. Make sure to install `xmldom`.
// See: https://github.com/zeit/next.js/issues/10533
// const { DOMParser } = require('xmldom')
// global.DOMParser = DOMParser

const { readFileSync } = require('fs')
const { basename } = require('path')
const { createServer } = require('http')
Expand Down

0 comments on commit 4e9d4d9

Please sign in to comment.