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

AkshayKatikaneni · 2023-08-09T11:36:33Z

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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/esm/server/app-render/action-handler.js:224:35)
at async handleAction (webpack-internal:///(ssr)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/esm/server/app-render/action-handler.js:174:13)
at async wrappedRender (webpack-internal:///(ssr)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/esm/server/app-render/app-render.js:1146:37)

xInfinitYz · 2023-08-09T18:17:10Z

Same here

DanielUrn · 2023-08-09T23:11:13Z

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 · 2023-08-10T07:55:45Z

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 · 2023-08-10T13:07:22Z

@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 · 2023-08-10T14:20:38Z

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

manovotny · 2023-08-10T14:25:48Z

Also possibly related... vercel/next.js#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 · 2023-08-10T20:12:22Z

@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 · 2023-08-11T07:36:16Z

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

drmartin1998 · 2023-08-12T18:42:32Z

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 · 2023-08-12T20:19:32Z

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

DanielUrn · 2023-08-14T12:26:59Z

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 · 2023-08-14T13:23:07Z

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 · 2023-08-26T12:24:42Z

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 · 2023-09-01T17:37:42Z

any updates on this for windows?

DevInteractiveWorkers · 2023-09-01T18:34:14Z

any updates on this for windows?

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

drmartin1998 · 2023-09-03T12:30:17Z

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 · 2023-09-03T13:26:09Z

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

AkshayKatikaneni commented Aug 9, 2023

xInfinitYz commented Aug 9, 2023

DanielUrn commented Aug 9, 2023

xInfinitYz commented Aug 10, 2023

DanielUrn commented Aug 10, 2023 •

edited

Loading

manovotny commented Aug 10, 2023

manovotny commented Aug 10, 2023

DanielUrn commented Aug 10, 2023 •

edited

Loading

mattbrailsford commented Aug 11, 2023 •

edited

Loading

drmartin1998 commented Aug 12, 2023 •

edited

Loading

manovotny commented Aug 12, 2023

DanielUrn commented Aug 14, 2023

mattbrailsford commented Aug 14, 2023

drmartin1998 commented Aug 26, 2023

andresousadotpt commented Sep 1, 2023

DevInteractiveWorkers commented Sep 1, 2023

drmartin1998 commented Sep 3, 2023

andresousadotpt commented Sep 3, 2023

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

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

Comments

AkshayKatikaneni commented Aug 9, 2023

xInfinitYz commented Aug 9, 2023

DanielUrn commented Aug 9, 2023

xInfinitYz commented Aug 10, 2023

DanielUrn commented Aug 10, 2023 • edited Loading

manovotny commented Aug 10, 2023

manovotny commented Aug 10, 2023

DanielUrn commented Aug 10, 2023 • edited Loading

mattbrailsford commented Aug 11, 2023 • edited Loading

drmartin1998 commented Aug 12, 2023 • edited Loading

manovotny commented Aug 12, 2023

DanielUrn commented Aug 14, 2023

mattbrailsford commented Aug 14, 2023

drmartin1998 commented Aug 26, 2023

andresousadotpt commented Sep 1, 2023

DevInteractiveWorkers commented Sep 1, 2023

drmartin1998 commented Sep 3, 2023

andresousadotpt commented Sep 3, 2023

DanielUrn commented Aug 10, 2023 •

edited

Loading

DanielUrn commented Aug 10, 2023 •

edited

Loading

mattbrailsford commented Aug 11, 2023 •

edited

Loading

drmartin1998 commented Aug 12, 2023 •

edited

Loading