Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[examples/with-react-intl] Fix issues with Intl.js polyfill #11806

Merged
merged 2 commits into from
Apr 13, 2020
Merged

[examples/with-react-intl] Fix issues with Intl.js polyfill #11806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04c7a63
Add workaround for Intl.js RegEx issue
fabianishere Apr 10, 2020
29a0eec
Do not load Intl.js polyfill by default on Node
fabianishere Apr 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/with-react-intl/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"full-icu": "^1.3.0",
"glob": "^7.1.4",
"intl": "^1.2.5",
"intl-locales-supported": "1.8.4",
"next": "latest",
"react": "^16.9.0",
"react-dom": "^16.9.0",
Expand Down
39 changes: 29 additions & 10 deletions examples/with-react-intl/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,34 @@
const { basename } = require('path')
const glob = require('glob')
const areIntlLocalesSupported = require('intl-locales-supported').default

// Get the supported languages by looking for translations in the `lang/` dir.
const supportedLanguages = glob
.sync('./lang/*.json')
.map(f => basename(f, '.json'))

// Polyfill Node with `Intl` that has data for all locales.
// See: https://formatjs.io/guides/runtime-environments/#server
const IntlPolyfill = require('intl')
Intl.NumberFormat = IntlPolyfill.NumberFormat
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
if (global.Intl) {
// Determine if the built-in `Intl` has the locale data we need.
if (!areIntlLocalesSupported(supportedLanguages)) {
// `Intl` exists, but it doesn't have the data we need, so load the
// polyfill and patch the constructors we need with the polyfills.
const IntlPolyfill = require('intl')
Intl.NumberFormat = IntlPolyfill.NumberFormat
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
Intl.__disableRegExpRestore = IntlPolyfill.__disableRegExpRestore
}
} else {
// No `Intl`, so use and load the polyfill.
global.Intl = require('intl')
}

// Fix: https://github.com/zeit/next.js/issues/11777
// See related issue: https://github.com/andyearnshaw/Intl.js/issues/308
if (Intl.__disableRegExpRestore) {
Intl.__disableRegExpRestore()
}

// Polyfill DOMParser for **pre-v4** react-intl used by formatjs.
// Only needed when using FormattedHTMLMessage. Make sure to install `xmldom`.
Expand All @@ -11,22 +37,15 @@ Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
// global.DOMParser = DOMParser

const { readFileSync } = require('fs')
const { basename } = require('path')
const { createServer } = require('http')
const accepts = require('accepts')
const glob = require('glob')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

// Get the supported languages by looking for translations in the `lang/` dir.
const supportedLanguages = glob
.sync('./lang/*.json')
.map(f => basename(f, '.json'))

// We need to expose React Intl's locale data on the request for the user's
// locale. This function will also cache the scripts by lang in memory.
const localeDataCache = new Map()
Expand Down