Translation will throw error when target Browser Locale is not present in Locales Import

[david-weissaufschwarz]

Project Information

Ich arbeite gerade an einer Extension, die im mStudio integriert werden soll.

Feedback

Ich möchte über "conditional rendering" eine TextArea nur anzeigen, wenn eine bestimmte Bedingung zutrifft, ansonsten wird diese nicht gerendert. Die Bedingung ist quasi ein Flag, das durch den Klick eines Buttons umgeswitch wird. Beim umswitchen und rendern der TextArea kommt es aber zu einem "Unhandled Runtime" Fehler, weil eine Variable undefined sein soll. Das hat wohl mit der Lokalisierung, die hinter der Kulissen läuft.

Fehlermeldung:

Error stack:

getStringForLocale@http://localhost:3000/_next/static/chunks/node_modules__pnpm_82f71b._.js:8536:22
format@http://localhost:3000/_next/static/chunks/node_modules__pnpm_82f71b._.js:8616:36
[project]/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@babel+core@_kpmsmmyzqpokgqypo32vflhbgi/node_modules/@mittwald/flow-react-components/dist/js/TextFieldBase-DJLq39K8.js [app-client] (ecmascript)/j<@http://localhost:3000/_next/static/chunks/ebe05_@mittwald_flow-react-components_dist_js_d87e51._.js:1032:14
react-stack-bottom-frame@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:12389:24
renderWithHooks@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:3400:42
updateForwardRef@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:4630:21
beginWork@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:5413:24
runWithFiberInDEV@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:631:20
performUnitOfWork@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:7936:97
workLoopSync@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:7829:57
renderRootSync@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:7810:13
performWorkOnRoot@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:7577:60
performSyncWorkOnRoot@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:8395:26
flushSyncWorkAcrossRoots_impl@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:8322:199
processRootScheduleInMicrotask@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:8339:38
[project]/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js [app-client] (ecmascript)/scheduleImmediateTask/<@http://localhost:3000/_next/static/chunks/ea1b2_next_dist_compiled_react-dom_55ac77._.js:8406:126

Meine React Komponente:

const NoteListItem = ({ noteData, onSave }: NoteProps) => {
  const [interactionMode, setInteractionMode] = useState(InteractionMode.VIEW);
  const [noteContent, setNoteContent] = useState(noteData.content || "");

  const handleButtonPress = () => {
    if (interactionMode === InteractionMode.VIEW) {
      setInteractionMode(InteractionMode.EDIT);
    } else {
      onSave({
        ...noteData,
        content: noteContent,
      });
      setInteractionMode(InteractionMode.VIEW);
    }
  };

  return (
    <LayoutCard className="p-4">
      <Heading>{noteData.title}</Heading>
      <Section>
        {interactionMode === InteractionMode.EDIT ? (
          <TextArea
            type="text"
            value={noteContent}
            onChange={(content) => setNoteContent(content)}
          />
        ) : (
          <Markdown>{noteContent}</Markdown>
        )}
        <Button onPress={(e) => handleButtonPress()}>
          {ButtonLabels[interactionMode]}
        </Button>
      </Section>
    </LayoutCard>
  );
};

[asishsahu946]

Hi david,

I’d love to contribute to this repository. Could you assign me to the repo so I can get started?

Thanks!
Asish kumar sahu

[ins0]

Hey @david-weissaufschwarz, could u please provide a CodeSandbox example where the issue is present. I wasn't able to reproduce the issue.

[david-weissaufschwarz]

@ins0 of course, here you are: https://codesandbox.io/p/devbox/3tjlrs

[david-weissaufschwarz]

@ins0 interesting, it seems to be a Browser specific issue, it happens on Firefox but not on Safari, maybe due to a Browser API that differs between them.

[david-weissaufschwarz]

@ins0 okay from my research it looks like the issue originates from the @internationalized/date Package included with react-spectrum. Can you confirm?

[ins0]

Thanks David, the example you provided works on my machine ;D with any modern browser.

• FireFox 133.0.3
• Chrome 131.0.6778.109
• Safari 18.1 (20619.2.8.11.10)

@ins0 interesting, it seems to be a Browser specific issue, it happens on Firefox but not on Safari, maybe due to a Browser API that differs between them.

can u please provide the specific browser and version you're using that produces an error on your provided example app?

[david-weissaufschwarz]

@ins0 I was able to hunt the issue down! It's a pretty obscure one!

So it really comes from the @internationalized package and happened due to the locale settings of my browser.

In my Firefox browser, I have configured the preferred language for the display of websites to be "spanish (es)", followed by german and english.
It turns out, because spanish cannot be provided by the components of the mFlow library, they crash the whole app. After changing the ordering of the preferred languages to be i.e. german or english first, everything works as expected!

🤯

[david-weissaufschwarz]

So we could close this issue. However, you might want to create a follow-up ticket to check if this situation can be avoided by catching the error in case the locale isn't available before the app crashes 😃

[ins0]

Ah nice catch, yes this should be prevented on our end as this is a "no go" behavior that leaves the user with no clue what or why something went bananas (like the first stage of this issue) 👍

I will reopen this issue with an updated title.

Thanks David!