mountSignUp not loading the locales

[souvik666]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs
• I have searched for existing issues: https://github.com/clerk/javascript/issues
• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://codeshare.io/oQ9yXp

Publishable key

pk_test_bWludC1oYW1zdGVyLTIyLmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. Try to render the signup component with localization

Expected behavior:

it should load the text in Spanish instead of English even if we are using a local object given by clerk team

    import { esES } from "@clerk/localizations";
    await clerk?.load({ localization: esES });
    clerk?.mountSignUp(containerRef.current, {
      afterSignUpUrl: window.origin + "/handshake",
      signInUrl: window.origin + "/login",
      redirectUrl: window.origin + "/handshake",
    });

Actual behavior:

it is always loading the text in English

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 6.85 GB / 15.39 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - ~\work\clibot\web-saas-ui\node_modules\.bin\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @chakra-ui/icons: ^2.0.18 => 2.1.0
    @chakra-ui/react: ^2.5.5 => 2.8.0
    @clerk/clerk-react: ^4.26.3 => 4.26.3
    @clerk/localizations: ^1.26.13 => 1.26.13
    @clerk/themes: ^1.7.9 => 1.7.9
    @emotion/react: ^11.10.6 => 11.11.1
    @emotion/styled: ^11.10.6 => 11.11.0
    @faker-js/faker: ^8.0.2 => 8.0.2
    @fseehawer/react-circular-slider: ^2.6.1 => 2.6.1
    @react-oauth/google: ^0.11.0 => 0.11.0
    @release-it/conventional-changelog: ^7.0.2 => 7.0.2
    @rematch/core: ^2.2.0 => 2.2.0
    @rematch/immer: ^2.1.3 => 2.1.3
    @rematch/loading: ^2.1.2 => 2.1.2
    @rematch/persist: ^2.1.2 => 2.1.2
    @rematch/select: ^3.1.2 => 3.1.2
    @rematch/updated: ^2.1.2 => 2.1.2
    @segment/analytics-next: ^1.58.0 => 1.58.0
    @sentry/react: ^7.85.0 => 7.85.0
    @stripe/react-stripe-js: ^2.4.0 => 2.4.0
    @tanstack/query-sync-storage-persister: ^4.15.1 => 4.32.0
    @tanstack/react-query-persist-client: ^4.16.1 => 4.32.0
    @tanstack/react-table: ^8.8.5 => 8.9.3
    @tanstack/react-virtual: ^3.0.0-beta.54 => 3.0.0-beta.54
    @testing-library/react: ^13.4.0 => 13.4.0
    @types/jest: ^29.5.2 => 29.5.3
    @types/mocha: ^10.0.1 => 10.0.1
    @types/node: ^18.11.9 => 18.16.19
    @types/react: ^18.0.24 => 18.2.15
    @types/react-color: ^3.0.6 => 3.0.6
    @types/react-copy-to-clipboard: ^5.0.4 => 5.0.4
    @types/react-dom: ^18.0.8 => 18.2.7
    @types/react-highlight: ^0.12.5 => 0.12.5
    @types/segment-analytics: ^0.0.35 => 0.0.35
    @typescript-eslint/eslint-plugin: ^5.42.1 => 5.62.0
    @typescript-eslint/parser: ^5.42.1 => 5.62.0
    @vitejs/plugin-react: ^2.2.0 => 2.2.0
    @vitest/coverage-c8: ^0.25.1 => 0.25.8
    axios: ^1.1.3 => 1.4.0
    chakra-dayzed-datepicker: ^0.2.10 => 0.2.10
    chart.js: ^4.3.0 => 4.3.0
    chartjs-adapter-date-fns: ^3.0.0 => 3.0.0
    cypress: ^12.17.0 => 12.17.2
    cypress-iframe: ^1.0.1 => 1.0.1
    date-fns: ^2.30.0 => 2.30.0
    dayzed: ^3.2.3 => 3.2.3
    eslint: ^8.27.0 => 8.45.0
    eslint-config-airbnb: ^19.0.4 => 19.0.4
    eslint-config-node: ^4.1.0 => 4.1.0
    eslint-config-prettier: ^8.5.0 => 8.8.0
    eslint-config-react-app: ^7.0.1 => 7.0.1
    eslint-plugin-cypress: ^2.14.0 => 2.14.0
    eslint-plugin-import: ^2.26.0 => 2.27.5
    eslint-plugin-jsx-a11y: ^6.6.1 => 6.7.1
    eslint-plugin-node: ^11.1.0 => 11.1.0
    eslint-plugin-prettier: ^4.2.1 => 4.2.1
    eslint-plugin-react: ^7.31.10 => 7.33.0
    eslint-plugin-react-hooks: ^4.3.0 => 4.6.0
    eslint-plugin-simple-import-sort: ^8.0.0 => 8.0.0
    firebase: ^10.0.0 => 10.3.0
    formik: ^2.2.9 => 2.4.2
    framer-motion: ^10.11.6 => 10.13.0
    husky: ^8.0.3 => 8.0.3
    immer: ^9.0.21 => 9.0.21
    jsdom: ^20.0.2 => 20.0.3
    json-2-csv: ^5.0.1 => 5.0.1
    moment: ^2.29.4 => 2.29.4
    monsterbot-sdk: github:Baliza-IT-Consultancy/Caleida-Core-SDK => 1.1.4
    npm: ^9.6.5 => 9.8.1
    path: ^0.12.7 => 0.12.7
    prettier: ^2.7.1 => 2.8.8
    rc-upload: ^4.3.4 => 4.3.4
    react: ^18.2.0 => 18.2.0
    react-chartjs-2: ^5.2.0 => 5.2.0
    react-circular-progressbar: 2.1.0 => 2.1.0
    react-color: ^2.19.3 => 2.19.3
    react-copy-to-clipboard: ^5.1.0 => 5.1.0
    react-date-range: ^1.4.0 => 1.4.0
    react-dom: ^18.2.0 => 18.2.0
    react-google-recaptcha-v3: ^1.10.1 => 1.10.1
    react-highlight: ^0.15.0 => 0.15.0
    react-highlight-within-textarea: ^3.1.1 => 3.2.1
    react-i18next: ^12.3.1 => 12.3.1
    react-icons: ^4.8.0 => 4.10.1
    react-joyride: ^2.7.0 => 2.7.0
    react-markdown: ^8.0.7 => 8.0.7
    react-phone-input-2: ^2.15.1 => 2.15.1
    react-query: ^3.39.2 => 3.39.3
    react-redux: ^8.0.5 => 8.1.1
    react-router-dom: ^6.4.3 => 6.14.2
    react-select: ^5.7.2 => 5.7.4
    react-tag-input-component: ^2.0.2 => 2.0.2
    react-tagsinput: ^3.20.3 => 3.20.3
    reactour: ^1.19.2 => 1.19.2
    redux-persist: ^6.0.0 => 6.0.0
    remark-breaks: ^3.0.3 => 3.0.3
    timeago-react: ^3.0.6 => 3.0.6
    typescript: ^4.6.4 => 4.9.5
    vite: ^3.2.3 => 3.2.7
    vite-plugin-eslint: ^1.8.1 => 1.8.1
    vite-tsconfig-paths: ^3.5.2 => 3.6.0
    vitest: ^0.25.1 => 0.25.8

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

[souvik666]

hey @LekoArts ,this the main implementation it's a react-vite project

import { chakra, Flex, Link, Stack, Text } from "@chakra-ui/react";
import {   esES } from "@clerk/localizations";
import { sdk } from "@configs/index";
import { colors } from "@constants/colors";
import { useEffect, useRef } from "react";


function SignupPage() {
  const _c = sdk?.clerk; // just the clerk instance
  const containerRef = useRef<HTMLDivElement>(null);
  // const lang = navigator.language || (navigator as any)?.userLanguage;
  const mountSignup = async () => {
    if (containerRef.current == null) return;
    await _c?.load({ localization: esES });
    _c?.mountSignUp(containerRef.current, {
      afterSignUpUrl: window.origin + "/handshake",
      signInUrl: window.origin + "/login",
      redirectUrl: window.origin + "/handshake",
    });
    return;
  };

  useEffect(() => {
    mountSignup();
    return () => {
      containerRef?.current && _c?.unmountSignIn(containerRef?.current);
    };
  }, [ ]);

  return (
    <Stack bg={colors.bg_5} minH={"100vh"} align={"center"} justify={"center"}>
      <div ref={containerRef}></div>
    </Stack>
  );
}

export default SignupPage;

[clerk-cookie]

In an effort to keep our GitHub issues clean and focused, we close any issues that are awaiting a reproduction after 8 days on inactivity, and it has been 7 days. This issue will be closed tomorrow unless a reproduction is produced. If it takes longer than this to get a reproduction, that's ok, just drop a comment and we will re-open the issue then.

Thanks for being a part of the Clerk community! 🙏

[LekoArts]

Hey 👋 Please post your full minimal reproduction (a GitHub repository) as often such errors can't be replicated from just a single code snippet. Thanks!

[souvik666]

Hey 👋 Please post your full minimal reproduction (a GitHub repository) as often such errors can't be replicated from just a single code snippet. Thanks!

sure I will try to make a small vite app for the same

[panteliselef]

@souvik666 What's preventing you from using the <ClerkProvider/> ?

[souvik666]

@souvik666 What's preventing you from using the <ClerkProvider/> ?

I'm already using it, I guess the signup component will not load without the provider it's in App.tsx

it's about the locals not being loaded, and I have tried both, passing locals to the provider and also using the js SDK to set locals before mounting it to a node

[panteliselef]

Is it possible to give us access to your repo or create a similar one and share that with us.

I've been doing this, in one of my personal apps for a while and I'm certain that it works.

<ClerkProvider localization={enGR}>
 {...}
</ClerkProvider>

[souvik666]

Is it possible to give us access to your repo or create a similar one and share that with us.

I've been doing this, in one of my personal apps for a while and I'm certain that it works.

<ClerkProvider localization={enGR}>
 {...}
</ClerkProvider>

I have tried it it might be a issue that i’M using the js sdk in react after changing the whole to react package it’s working fine

[panteliselef]

One more thing

If you wish to load clerk from clerk-js and then also use the provider you can pass the clerk instance to ClerkProvider via the Clerk={} prop. But i don't think it does not worth the trouble :)

[souvik666]

One more thing

If you wish to load clerk from clerk-js and then also use the provider you can pass the clerk instance to ClerkProvider via the Clerk={} prop. But i don't think it does not worth the trouble :)

Have done the same way with locals prop no luck anyway now it’s working fine