ContextError: useStepFormContext: `context` is undefined

[waptik]

Hi again! I kinda have this weird issue with useStepFormContext in localhost. I tried using the code from https://github.com/saas-js/saas-ui/discussions/51#discussioncomment-3021816 but I'm getting this error:

`ContextError: useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`

The weird part is that the same code works on codesandbox. Here is the Sandbox and the demo

[Pagebakers]

There is likely a version mismatch. Updating @saas-ui/react and /form should resolve it.

[Pagebakers]

Which package manager and version are you using in the project by the way?

[waptik]

Which package manager and version are you using in the project by the way?

yarn 3.2.0 I'm using a monorepo powered by turborepo

[waptik]

There is likely a version mismatch. Updating @saas-ui/react and /form should resolve it.

I update both but still same error. I'll uninstall both and reinstall them again and see

[Pagebakers]

This looks good 👌

I will try your example on my machine and get back to you shortly.

[Pagebakers]

These are the steps I followed.

1. git clone git@github.com:saas-js/saas-ui-nextjs-landing-page.git
2. Copy your code
3. yarn
4. yarn set version berry
5. yarn dev

And it's working as expected.

1. Check if nodeLinker: node-modules is configured in .yarnrc.yml
2. Delete the node_modules directory and reinstall.

This should definitely fix it.

[waptik]

These are the steps I followed.

1. git clone git@github.com:saas-js/saas-ui-nextjs-landing-page.git
2. Copy your code
3. yarn
4. yarn set version berry
5. yarn dev

And it's working as expected.

1. Check if nodeLinker: node-modules is configured in .yarnrc.yml
2. Delete the node_modules directory and reinstall.

This should definitely fix it.

I followed the same steps as you did and it works but another error pops up after form submission. It also shows up on the csb demo as well.

After some time, I found the reason for that error. It was because the onSubmit function I added to StepForm.onSubmit wasn't async so after I added an async statement, the success alert message showed up.

Following the steps below, the error regarding useStepFormContext has been fixed.

• [x] Check if nodeLinker: node-modules is configured in .yarnrc.yml
• [x] Delete the node_modules directory and reinstall.

[Pagebakers]

These are the steps I followed.

1. git clone git@github.com:saas-js/saas-ui-nextjs-landing-page.git
2. Copy your code
3. yarn
4. yarn set version berry
5. yarn dev

And it's working as expected.

1. Check if nodeLinker: node-modules is configured in .yarnrc.yml
2. Delete the node_modules directory and reinstall.

This should definitely fix it.

I followed the same steps as you did and it works but another error pops up after form submission. It also shows up on the csb demo as well.

After some time, I found the reason for that error. It was because the onSubmit function I added to StepForm.onSubmit wasn't async so after I added an async statement, the success alert message showed up.

Following the steps below, the error regarding useStepFormContext has been fixed.

• [x] Check if nodeLinker: node-modules is configured in .yarnrc.yml
• [x] Delete the node_modules directory and reinstall.

Good that that's settled then!

You should get a type error when onSubmit isn't async / returning a promise. Just checked but this is not the case, I'll open an new issue for this tomorrow.

[waptik]

Good that that's settled then!

You should get a type error when onSubmit isn't async / returning a promise. Just checked but this is not the case, I'll open an new issue for this tomorrow.

Alright, looking forward to the fix.