verswell-commerce template broken cart behavior

[Ethan-Guest]

Hello,

I am experiencing a cart caching issue while using the verswell-commerce template. It appears that cart cookies are somehow being cached on the server instead of on the client, resulting in a shared cart across all users on our store. (i.e. one user adds an item to a cart, all other visitors will see that cart until it is checked out...) I realize this is likely a nextjs issue, but I am posting here since I have not had luck in the nextjs forums, and I also cannot even run a fresh copy of the verswell-commerce template while attempting to reproduce. I get the error below, which I expect is related to the cause in my own application, except that mine made it to production without any errors. To me this error indicates that nextjs is attempting to write cookies from the server instead of the client, hence requestAsyncStorage not being available:

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
(node:4936) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
- event compiled client and server successfully in 503 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 103 ms (20 modules)
- info Loaded env from D:\repos\verswell-commerce\.env
- info Loaded env from D:\repos\verswell-commerce\.env
(node:10048) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:10604) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 3.6s (2208 modules)
- error Error: Invariant: Method expects to have requestAsyncStorage, none available
    at Cart (./components/cart/index.tsx:15:73)
    at stringify (<anonymous>)
- error Error: invariant expected app router to be mounted
    at Search (./components/layout/navbar/search.tsx:18:78)

I have no idea why or how this is happening, it is extremely frustrating and is currently blocking our customers from checking out. Any tips for how to resolve this? Is the hosted version of the verswell-commerce template up to date with the repository? What kind of configuration is used in that template that is different from the one on github? Any help is greatly appreciated, this is currently a huge blocker for us right now.

[maarten2424]

Hey @Ethan-Guest,

We can't replicate this issue on our end.

Did you set up your project using the deploy button? This directly creates the repository with the correct settings on vercel. After that, you can clone the project directly from your github/gitlab/bitbucket repository. Make sure you are running node version > 18 and install using pnpm install. Could you try this and check if the issue still occurs?

Please try this out and let us know, thank you!

[SammaniAri]

Hi,
Im getting the same error when trying to run the storefront locally.The deployed version in vercel seems to work fine. I have tried settingup the project using the deploy button and then cloning the project from my github https://github.com/SammaniAri/swell-storefront. Im using node 18.15.0

⨯ Error: Invariant: cookies() expects to have requestAsyncStorage, none available. at Cart (./components/cart/index.tsx:15:73) at stringify (<anonymous>) ⨯ Error: invariant expected app router to be mounted at Search (./components/layout/navbar/search.tsx:15:78) ✓ Compiled /favicon.ico/route in 309ms (39 modules)