error Error: Invariant: Method expects to have requestAsyncStorage, none available at addItem (./components/cart/actions.ts:17:71)

[AkshayKatikaneni]

Im getting this error when i m trying to add product in local

POST http://localhost:3000/product/surf-turf?delivery+date=2+Jul 500 (Internal Server Error) fetchServerAction @ server-action-reducer.js:27 await in fetchServerAction (async) serverActionReducer @ server-action-reducer.js:96 clientReducer @ router-reducer.js:49 eval @ use-reducer-with-devtools.js:63 updateReducerImpl @ react-dom.development.js:11508 updateReducer @ react-dom.development.js:11346 useReducer @ react-dom.development.js:13099 useReducer @ react.development.js:1789 useReducerWithReduxDevtoolsImpl @ use-reducer-with-devtools.js:102 Router @ app-router.js:172 renderWithHooks @ react-dom.development.js:10855 updateFunctionComponent @ react-dom.development.js:15893 beginWork$1 @ react-dom.development.js:18102 beginWork @ react-dom.development.js:26476 performUnitOfWork @ react-dom.development.js:25327 workLoopConcurrent @ react-dom.development.js:25313 renderRootConcurrent @ react-dom.development.js:25269 performConcurrentWorkOnRoot @ react-dom.development.js:24122 workLoop @ scheduler.development.js:261 flushWork @ scheduler.development.js:230 performWorkUntilDeadline @ scheduler.development.js:537 3redirect-boundary.js:61 Uncaught Error: Invariant: Method expects to have requestAsyncStorage, none available at cookies (webpack-internal:///(actionBrowser)/./node_modules/.pnpm/next@13.4.13-canary.15_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/headers.js:46:15) at addItem (webpack-internal:///(actionBrowser)/./components/cart/actions.ts:17:71) at endpoint (webpack-internal:///(actionBrowser)/./node_modules/.pnpm/next@13.4.13-canary.15_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-flight-action-entry-loader.js?actions=%5B%5B%22C%3A%5C%5CEXCELOID%20-%20AVINASH%5C%5CNextJS%20Commerce%5C%5CShopify%5C%5C08-08-2023%5C%5Cdev%5C%5Ccommerce%5C%5Ccomponents%5C%5Ccart%5C%5Cactions.ts%22%2C%5B%22addItem%22%2C%22removeItem%22%2C%22updateItemQuantity%22%5D%5D%5D&__client_imported__=true!:10:17) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async eval (webpack-internal:///(ssr)/./node_modules/.pnpm/next@13.4.13-canary.15_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/app-render/action-handler.js:224:35) at async handleAction (webpack-internal:///(ssr)/./node_modules/.pnpm/next@13.4.13-canary.15_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/app-render/action-handler.js:174:13) at async wrappedRender (webpack-internal:///(ssr)/./node_modules/.pnpm/next@13.4.13-canary.15_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/app-render/app-render.js:1146:37)

[xInfinitYz]

Same here

[DanielUrn]

This issue has been troubling me so bad I've tried calling cookies locally everywhere, server side and client side components, none working and throwing the same issue Thought it was an error o' mine but the original template has the problem by default

[xInfinitYz]

I've replaced next/headers for js-cookie for now, no exceptions nevertheless I did not tested full functionality.

File: components/cart/index.tsx

import Cookies from 'js-cookie';
import { getCart } from 'lib/shopify';
import CartModal from './modal';

export default async function Cart() {
  const cartId = Cookies.get('cartId');
  let cart;

  if (cartId) {
    cart = await getCart(cartId);
  }

  return <CartModal cart={cart} />;
}

[DanielUrn]

@xInfinitYz Hasn't worked for me next/headers won't work locally, but it does work when uploaded to Vercel, the heck

import Cookies from 'js-cookie';
import { createCart, getCart } from 'lib/shopify';
import { cookies } from 'next/headers';
import CartModal from './modal';

export default async function Cart() {
  const cartId = cookies().get('cartId')?.value;
  const fake = Cookies.get('cartId')
  console.log(cartId, fake);

  let cartIdUpdated = false;
  let cart;

  if (cartId) {
    cart = await getCart(cartId);
  }

  // If the `cartId` from the cookie is not set or the cart is empty
  // (old carts becomes `null` when you checkout), then get a new `cartId`
  //  and re-fetch the cart.
  if (!cartId || !cart) {
    cart = await createCart();
    cartIdUpdated = true;
  }

  return <CartModal cart={cart} cartIdUpdated={cartIdUpdated} />;
}

At first this logs undefined, undefined When I add a product to the cart, it logs cartId, undefined js-cookies is not working for some reason I also went ahead and added js-cookies.set to Cart Modal useEffect's:

  useEffect(() => {
    if (cartIdUpdated) {
      setCookie('cartId', cart.id, {
        path: '/',
        sameSite: 'strict',
        secure: process.env.NODE_ENV === 'production'
      });
      Cookies.set('cartId',cart.id)
    }
    return;
  }, [setCookie, cartIdUpdated, cart.id]);

not working either

[manovotny]

Can one or some of you run npx --no-install next info in the project and copy / paste the results here, please?

[manovotny]

Also possibly related... https://github.com/vercel/next.js/issues/53331

What if y'all change all instances of export const runtime = 'edge'; to export const runtime = 'nodejs';? Does that "fix" it for you?

Obviously that is not the ideal fix, but it would help us troubleshoot and isolate the issue.

[DanielUrn]

@manovotny npx --no-install next info outputs:

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.9-canary.2
      eslint-config-next: 13.4.8
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

And yes, the export const runtime = 'nodejs' stopped the issue Anyhow, I'm happy with this "solution" since I'm not doing too much use of cookies, and whenever I deploy to vercel I'll change it back to export const runtime = 'edge' (since it's working there on rundime edge as I mentioned before, this error just pops out for me on pnpm dev) And again, I thought it was my code, but I tried several times clonning the template and installing everything again and the original template throws the requestAsyncStorage error

Thank you for allowing me to work with more ease I've been developing commiting, then sync-ing and waiting 1-2min each time for Vercel to build the branch, just to see a single color:red; change :(

[mattbrailsford]

I was hitting this issue on Windows and the only way I could resolve it is to launch dev within WSL

[drmartin1998]

Output from npx --no-install next info below. Switching to js-cookie seemed to fix it for me. I couldn't get the default template to work without doing that.

      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.15
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

warn  - Latest canary version not detected, detected: "13.4.13-canary.15", newest: "13.4.14-canary.2".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue```

[manovotny]

So far it seems like a Windows + Edge issue. I'll see if I can whip up a minimal reproduction.

[DanielUrn]

I was hitting this issue on Windows and the only way I could resolve it is to launch dev within WSL

Lol, yes, Windows was the one to blame this whole time Even tho, running this project with locally WSL is very slow. I have to try with Docker or maybe just installing Linux once and for all Thank you

[mattbrailsford]

I was hitting this issue on Windows and the only way I could resolve it is to launch dev within WSL

Lol, yes, Windows was the one to blame this whole time Even tho, running this project with locally WSL is very slow. I have to try with Docker or maybe just installing Linux once and for all Thank you

Do post back if you find a nicer/faster way of working. I'm not finding working through WSL that bad, but if there is a speedier way to work, I'd love to know 👍

[drmartin1998]

To anyone coming back to this, js-cookie will not accomplish a full solution for cart. I've only been able to get this working moving to running the server from WSL, which is not ideal.

[andresousadotpt]

any updates on this for windows?

[DevInteractiveWorkers]

any updates on this for windows?

I don't know much about this but seems like the problem is Nextjs itself

[drmartin1998]

Right now your options are to buy a Mac, install WSL, find an alternative cookie header library, or dig into the issue and open a PR. I think this is a problem with next/headers cookie implementation though and nothing in the eCommerce package. Right now I'm just rolling with WSL.

[andresousadotpt]

What I did was changing export const runtime = 'edge'; to export const runtime = 'nodejs'; on the development environment and to edge again when deploying to production.