Locale next button varies in production

[serhatgnc]

🐛 Bug Report

There is an inconsistency in the locale configuration behavior for react-joyride. While the next label works correctly in development and local production environments (e.g., Sonraki (1/5)), in the production environment deployed on our servers, the label changes to Next (Step 1 of 5).

This happens even though:

1. All environments use the same configuration for react-joyride.
2. Other locale labels such as last and skip work correctly.
3. The issue does not occur in local builds (both in development and production modes).

The most unusual part is that the label format changes ((Step 1 of 5) vs. (1/5))

To Reproduce

Steps to reproduce the behavior:

1. Configure react-joyride with a locale object like the following:

<Joyride
   steps={steps}
   run={runTour}
   continuous
   showSkipButton
   showProgress
   disableCloseOnEsc
   disableOverlayClose
   hideCloseButton
   locale={{
     back: t("general.button.back"),
     close: t("general.button.close"),
     last: t("general.button.ok"),
     next: t("general.button.next"),
     skip: t("general.button.skip"),
   }}
/>

2. Deploy the application to a production environment.
3. Observe the "Next" button label in the tour:

• In development or local production mode: Sonraki (1/5)

• In deployed production: Next (Step 1 of 5)

Expected behavior

The label for the "Next" button should remain consistent across all environments. In all cases, it should display Sonraki (1/5) in Turkish.

Link to repl or repo (highly encouraged)

Unfortunately, I cannot provide a public link to reproduce the issue, as this is part of a private company project. However, I can assist with further debugging information if needed.

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

System: OS: Windows 11 10.0.22631 CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 17.53 GB / 31.91 GB Binaries: Node: 20.14.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD pnpm: 9.5.0 - ~\AppData\Roaming\npm\pnpm.CMD npmPackages: react-joyride: ^2.9.2 => 2.9.2

[gilbarbara]

Hey @serhatgnc

There's a new locale to use with the showProgress prop. It's the nextLabelWithProgress Let me know if that fixes your problem.

[serhatgnc]

Thank you for your suggestion! I’ve already tested the nextLabelWithProgress property as part of troubleshooting, but the issue persists even when using it. When I use locale.next, the issue appears in the production environment with showProgress. Switching to nextLabelWithProgress did not resolve the problem—it still shows inconsistent behavior between development/local builds and production. The most puzzling aspect is that the label format changes in production (Next (Step 1 of 5) vs. Sonraki (1/5) in development/local). This suggests something is interfering with how locale properties are processed during production builds.

Let me know if there’s anything else I should check or debug further

With code block below this is how it looks like in the both environments

Production

Local

Even the format is not being taken into account.

<Joyride
        steps={steps}
        run={runTour}
        continuous
        showSkipButton
        showProgress
        disableCloseOnEsc
        disableOverlayClose
        hideCloseButton
        disableScrollParentFix={true}
        spotlightPadding={spacing._00}
        callback={handleJoyrideCallback}
        locale={{
          back: t("general.button.back"),
          close: t("general.button.close"),
          last: t("general.button.ok"),
          next: t("general.button.next"),
          skip: t("general.button.skip"),
          nextLabelWithProgress: (
            stepIndex: number,
            totalSteps: number
          ): string => {
            return `(${stepIndex + 1} / ${totalSteps}) - ${t("general.button.next")}`;
          },
        }}
      />

[gilbarbara]

Hey @serhatgnc Just set a string instead of a function to the nextLabelWithProgress : ({step} / {steps}) - ${{t("general.button.next")}.

[pankajpatel]

Hello @gilbarbara ,

I was caught off guard with this change. Use of nextLabelWithProgress should have been optional or given in the breaking change version release. Production tests broke down.

Is there a way to keep the old behavior?

PS: This is really good change and I am sure I will use it in the next onboarding tour. Thanks for adding this props. Though, this change disrupts ongoing tours.