<IntlProvider> leads to crash in production build

[janoschp]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

jolly-antonelli-gs7stzrg5w

Describe the bug

Using your <IntlProvider> component works well in a dev build but not in an optimized production build. The error I keep getting is this:

When I use the <IntlProvider> from 'react-intl' then there is no problem, but I no longer have the option to override ory error messages, which I now have to do.

Reproducing the bug

Setup a nextjs project, use any ory element that is wrapped in a <IntlProvider> from '@ory/elements' component. Create a production build like next build and run next start. Open the website with the ory element on it -> client-side crash.

Relevant log output

Failed to load resource: the server responded with a status of 401 (Unauthorized)
8041-ac529177d55d32fd.js:19 TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function
    at memoize (ceb6948a-f5b67890939b9aa6.js:5:62014)
    at createFormatters (ceb6948a-f5b67890939b9aa6.js:16:1330)
    at createIntl$1 (ceb6948a-f5b67890939b9aa6.js:26:119)
    at createIntl (ceb6948a-f5b67890939b9aa6.js:26:4026)
    at new t (ceb6948a-f5b67890939b9aa6.js:26:4634)
    at lC (fd9d1056-92f9772659382b4a.js:1:55121)
    at lW (fd9d1056-92f9772659382b4a.js:1:60010)
    at iZ (fd9d1056-92f9772659382b4a.js:1:118352)
    at ia (fd9d1056-92f9772659382b4a.js:1:95507)
    at fd9d1056-92f9772659382b4a.js:1:95329
    at il (fd9d1056-92f9772659382b4a.js:1:95336)
    at oJ (fd9d1056-92f9772659382b4a.js:1:92692)
    at nb (fd9d1056-92f9772659382b4a.js:1:27178)
    at nw (fd9d1056-92f9772659382b4a.js:1:27916)
    at fd9d1056-92f9772659382b4a.js:1:28950
(anonymous) @ 8041-ac529177d55d32fd.js:19

Relevant configuration

No response

Version

"@ory/client": "^1.15.0",     "@ory/elements": "^0.5.0",

On which operating system are you observing this issue?

Ory Network

In which environment are you deploying?

Ory Network

Additional Context

No response

[jonas-jonas]

I can't reproduce this issue. Could you provide a minimal reproduction, e.g. some code, that you used to trigger this?

[janoschp]

@jonas-jonas I was able to reproduce the bug within a default next.js project. Here is a proof of concept: https://github.com/janoschp/ory-elements-bug-proof-of-concept . Run next build & next start and open http://localhost:3000 to see it. This bug does not occur when running next dev.

[janoschp]

You can also try replacing the <IntlProvider> provided by "@ory/elements" by using the library "react-intl": "^6.6.8" and importing their <IntlProvider>, which will make the bug disappear. Which means the bug must be triggered by the diff between your IntlProvider (which I assume builds on the one from react-intl) and theirs.

[janoschp]

@jonas-jonas could you reproduce the bug with my code?

[wonyx]

I faced same issue.

[mszekiel]

I was able to reproduce the issue with your example @janoschp, thank you for submitting this. For now I do not have a clear solution for this bug, I'll be checking few other options and will let you know if it's fixed. It seems like bundling the library itself is a problem.

[janoschp]

Any progress on this?

[aeneasr]

We are very close to releasing Ory Elements 1.0 for ReactJS, where this will no longer be an issue. It also works with NextJS page and app router, and a lot more.

[aeneasr]

I looked into this issue, and agree with @mszekiel that it is probably something with the bundling process? For some reason, the argument passwed to react-intl is an object and not a function, which may happen if we target for the wrong bundle? I'm not sure.

I've suuplied a PR to upgrade react-intl, in the hopes that it will just solve the issue, but I wouldn't bet on it ;)

[aeneasr]

Can someone in this thread please check if upgrading react-intl helps?

[loicsaintroch]

Any update on this?

I confirm the solution @janoschp mentioned works: replacing IntlProvider of Ory Elements by the one of react-intl (version 7.0.1 in my case) allows to build without the issue. Only thing is we can't pass customTranslations.