From 4e9d4d932f6bfe7115b5a0e108dec6472db8aba3 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 2 Mar 2020 12:49:06 +0100
Subject: [PATCH] Add example for polyfilling DOMParser in Node

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.
---
 examples/with-react-intl/README.md | 13 +++++++++++++
 examples/with-react-intl/server.js |  6 ++++++
 2 files changed, 19 insertions(+)

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')