gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.91k stars 536 forks source link

Locale next button varies in production #1111

Open serhatgnc opened 4 days ago

serhatgnc commented 4 days ago

šŸ› 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).

non-problem problem

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:

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 commented 3 days ago

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 commented 3 days ago

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 image

Local image

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 commented 3 days ago

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

pankajpatel commented 2 days ago

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.