<IntlProvider> leads to crash in production build

janoschp commented 6 days ago

Preflight checklist

[X] I could not find a solution in the existing issues, docs, nor discussions.
[X] I agree to follow this project's Code of Conduct.
[X] I have read and am following this repository's Contribution Guidelines.
[X] 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 commented 5 days ago

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

janoschp commented 4 days ago

@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 commented 4 days ago

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.

ory / elements