Open AkshayKatikaneni opened 1 year ago
Same here
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
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} />;
}
@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
Can one or some of you run npx --no-install next info
in the project and copy / paste the results here, please?
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.
@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 :(
I was hitting this issue on Windows and the only way I could resolve it is to launch dev within WSL
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```
So far it seems like a Windows + Edge issue. I'll see if I can whip up a minimal reproduction.
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
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 đź‘Ť
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.
any updates on this for windows?
any updates on this for windows?
I don't know much about this but seems like the problem is Nextjs itself
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.
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.
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)