Next step not rendering #29
Description
Hello, i was trying to render the next step ui for onboarding in one of my project. the ui rendered for the first time when used but after subsequent refresh or even restarting the server the ui stopped rendering could not find any bug . Tried to debug and log in the console about what is the current tour or what is the current step they are showing proper values but the ui is not rendering here are some screenshots of the parts that i used
Techstack : next js 14(app router) with typescript, tailwind css for styling and shadcn components are used in the project
This is the provider part
This part the only tour written in seperate file and exported
import { Tour } from "nextstepjs";
export const dashboardTour: Tour = {
tour: "dashboardTour",
steps: [
{
icon: "h",
title: "This is dashboard",
content: "you can see all your analytics!",
selector: "#dashboardTourstep1",
side: "right",
showControls: true,
showSkip: true,
},
{
icon: "t",
title: "This is Customer",
content: "you can see all your customers here!",
selector: "#dashboardTourstep2",
side: "right",
showControls: true,
showSkip: true,
},
{
icon: "",
title: "This is Projects",
content: "you can see all your projects here!",
selector: "#dashboardTourstep3",
side: "right",
showControls: true,
showSkip: true,
},
{
icon: "",
title: "This is staff section",
content: "you can see all staffs here!",
selector: "#dashboardTourstep5",
side: "right",
showControls: true,
showSkip: true,
},
{
icon: "",
title: "This is project type section",
content: "you can create your own template for projects here!",
selector: "#dashboardTourstep4",
side: "right",
showControls: true,
showSkip: true,
},
],
};This is the steps part that is imported and used in the nextstep
import { Tour } from "nextstepjs"
import { dashboardTour } from "./dashboardTour"
export const steps:Tour[] = [
{
...dashboardTour
}
]I made sure all the ids are present and spelled correctly
This is the invoking of the next step method
<Button
onClick={() => {
startNextStep("dashboardTour");
console.log("currentTour: ", currentTour);
console.log("currentStep: ", currentStep);
console.log("visible: ", isNextStepVisible);
}}
>
Start
</Button>This is the console output
after subsequent invoking this part comes
all of these values in the console.log are coming ffrom the useNextStep hook
const {
startNextStep,
closeNextStep,
currentTour,
currentStep,
setCurrentStep,
isNextStepVisible,
} = useNextStep();