diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md index a26ee71232925..d7e703e283187 100644 --- a/examples/with-react-intl/README.md +++ b/examples/with-react-intl/README.md @@ -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 diff --git a/examples/with-react-intl/server.js b/examples/with-react-intl/server.js index a39a5520344ed..073f9ccee7e1f 100644 --- a/examples/with-react-intl/server.js +++ b/examples/with-react-intl/server.js @@ -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')