Error formatting date using injection api.

[wmcbain]

Using react-intl@2.3.0 and react-native@0.44.0.

I'm trying to use the formatDate api using the injectIntl method. When I do so I receive the following stack trace.

SyntaxError: Invalid regular expression: /[\s\S]{4}(((((((())))))))[\s\S]{3})/: Unmatched ')'
reactConsoleErrorHandler @ ExceptionsManager.js:71
console.error @ YellowBox.js:62
formatDate @ index.js:557
componentWillReceiveProps @ RatingTextTip.js:61
(anonymous) @ ReactCompositeComponent.js:846
measureLifeCyclePerf @ ReactCompositeComponent.js:63
updateComponent @ ReactCompositeComponent.js:845
receiveComponent @ ReactCompositeComponent.js:744
receiveComponent @ ReactReconciler.js:158
obj.(anonymous function) @ backend.js:1492
_updateRenderedComponentWithNextElement @ ReactCompositeComponent.js:1139
_updateRenderedComponent @ ReactCompositeComponent.js:1110
_performComponentUpdate @ ReactCompositeComponent.js:1032
updateComponent @ ReactCompositeComponent.js:914
receiveComponent @ ReactCompositeComponent.js:744
receiveComponent @ ReactReconciler.js:158
obj.(anonymous function) @ backend.js:1492
_updateRenderedComponentWithNextElement @ ReactCompositeComponent.js:1139
_updateRenderedComponent @ ReactCompositeComponent.js:1110
_performComponentUpdate @ ReactCompositeComponent.js:1032
updateComponent @ ReactCompositeComponent.js:914
performUpdateIfNecessary @ ReactCompositeComponent.js:769
performUpdateIfNecessary @ ReactReconciler.js:210
obj.(anonymous function) @ backend.js:1492
runBatchedUpdates @ ReactUpdates.js:145
perform @ Transaction.js:150
perform @ Transaction.js:150
perform @ ReactUpdates.js:77
flushBatchedUpdates @ ReactUpdates.js:164
close @ ReactUpdates.js:46
closeAll @ Transaction.js:221
perform @ Transaction.js:163
perform @ ReactUpdates.js:77
flushBatchedUpdates @ ReactUpdates.js:164
closeAll @ Transaction.js:221
perform @ Transaction.js:163
batchedUpdates @ ReactDefaultBatchingStrategy.js:61
batchedUpdates @ ReactUpdates.js:92
batchedUpdates @ ReactGenericBatching.js:38
batchedUpdatesWithControlledComponents @ ReactGenericBatching.js:51
_receiveRootNodeIDEvent @ ReactNativeEventEmitter.js:105
receiveTouches @ ReactNativeEventEmitter.js:192
__callFunction @ MessageQueue.js:250
(anonymous) @ MessageQueue.js:101
__guard @ MessageQueue.js:218
callFunctionReturnFlushedQueue @ MessageQueue.js:100
t @ RNDebuggerWorker.js:1

Example:

this.props.intl.formatDate(Date.now(), {
  year: 'numeric',
  month: 'long',
  day: '2-digit'
})

Have tried a variety of different formats, even using the Date.now() example in the documentation. formatRelative works on the same json. Additionally have tried to load the pjson data from the intl library to the polyfill.

Thanks and let me know if there's anything else I can provide.

[kiroukou]

Hello,
I do have the exact same issue, without knowing what may cause it at all...
Anyone here has an idea to share ?

Thx

[zabojad]

@wmcbain Have you been able to solve or workaround it?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[longlho]

based on the err message I don't think it's in our code :-/ If you can make a small repo to demo the issue that'd be great. Feel free to reopen.

[HollyPony]

I have the same. And idk why but problem is solve if I console.log() the used var.

renderItem={({ item: intervention }) => {
  console.log('=>', title) // TODO: idk this console.log is madatory for formatDate
  return <Text style={{ fontWeight: 'bold' }}>{intl.formatDate(title)}</Text>
}}

"react": "16.8.3",
"react-intl": "^2.9.0",
"react-native": "0.59.8",
"date-fns": "^1.30.1",

PS: It seems to happen only on Android

EDIT: I'm not able to reproduce in Snack but I share it if you wanna play : https://snack.expo.io/rJ9f-vWlr

[HollyPony]

I have more informations dismissing the error :

So, I can see the value with parentheses even if it's not my value -> 2019-06-21T12:00:00+00:00 (from the console.log in render)

[HollyPony]

As far I can investigate, it's seems to be due to the toString behaviour (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString).

Trying to console.log('' + new Date()) (or whatever the date but you can test in a browser).

Anyway I found a relative fix disabling the cache of the polyfill used of Intl with Intl.__disableRegExpRestore() (https://github.com/andyearnshaw/Intl.js#regexp-cache--restore)

[longlho]

Thanks for reporting and sorry for the late reply. Yes this does seem like a Intl.js polyfill issue. All the runtimes that we support has built-in Intl (IE11+). I've updated our docs for React Native runtimes requirements to always use the International variant.

[lucasbasquerotto]

I was able to solve issues of react-intl in Android using Expo (React Native) by using the Hermes Engine, defining:

"android": {
    ...
    "jsEngine": "hermes"
}

in app.json (https://docs.expo.dev/guides/using-hermes/).