adrianhajdin / ecommerce_sanity_stripe Goto Github PK

Hi, I'm getting this issue after running slug.js. I'm currently at 1:28:00min in the video. Kindly Help me to fix this error

SECURITY WARNING: Anyone who uses this repository as an example, be aware that the usage of env variables is not secure and you will leak your secret keys to the browser, allowing complete access to your stripe and sanity apis to any user who inspects the bundled Javascript.

Do not use this example without renaming your .env variables` and reading up on how environment variables in NextJS work!

See the .env file in this repo.

Any variable prefixed with NEXT_PUBLIC_ will be exposed to the browser. Read docs here: https://vercel.com/docs/concepts/projects/environment-variables

STRIPE_SECRET_KEY must not be exposed be made public. From the Stripe docs concerning the secret key: "On the server-side. Must be secret and stored securely in your web or mobile app’s server-side code (such as in an environment variable or credential management system) to call Stripe APIs." Read docs here: https://stripe.com/docs/keys

NEXT_PUBLIC_SANITY_TOKEN must only be used on the server, see docs here: https://www.sanity.io/docs/http-auth

NEXT_PUBLIC_SANITY_TOKEN = skqX4kdZKQRvszcSCIm7xQgzfu7lab7cgdpdeVnHr3AZ1Bzhv40Mqf7lQWQis6Wh5rnb8NzWr6vyQ0enw9SJCCOeAkT18GCdE70DYw2YPhIF26U3TM02qPEoZm8zcy8vBhu3RAvZvTs2vYfGdO8lDGMszusMbsPdBKMYRN3WiXqfeeJqkvdK

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = pk_test_51Hqmw9EnylLNWUqj3gbIK3wHZBXqH0HegicIlGA0etfwS9a5JpESWoFucZHdnWMp0q6xq6thYSZghQUSpLkE46wJ00HrkNMsOV

NEXT_PUBLIC_STRIPE_SECRET_KEY = sk_test_51Hqmw9EnylLNWUqjP36GV1DkreuhVt1E4l7L1y7YwhvjES8OylYVpKjpIxTjv1FqKWq81pZWBjycNIJH9n1jfI7800n4seyJCH

I keep getting this error below in my terminal, what do I do?

"npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR!
npm ERR! To permanently fix this problem, please run:
npm ERR! sudo chown -R 501:20 "

I compared all the code and nothing is different, the heroBanner button drop a error message when trying to show the detail pages of the banner product.

the error:

Server Error
TypeError: Cannot destructure property 'image' of 'product' as it is null.

I don't find why is happening.

Unable to add different items to cart, always add same/initial item. i have cloned this project and still not work.
edit: Error message on the right solved but the issue in the title remains.

i am facing this whenever i click pay with stripe after searching a lot i can't fix it.some site say that response is not getting converted as json before transferring data i did all thing still can't do any thing, infact atlast i copied code from this git repo put my key and info still not working.

below is my cart jsx code-
`import React, { useRef } from 'react';
import Link from 'next/link';
import { AiOutlineMinus, AiOutlinePlus, AiOutlineLeft, AiOutlineShopping } from 'react-icons/ai';
import { TiDeleteOutline } from 'react-icons/ti';
import toast from 'react-hot-toast';

import { useStateContext } from '../context/StateContext';
import { urlFor } from '../lib/client';
import getStripe from '../lib/getStripe';

const Cart = () => {
const cartRef = useRef();
const { totalPrice, totalQuantities, cartItems, setShowCart, toggleCartItemQuanitity, onRemove } = useStateContext();

const handleCheckout = async () => {
const stripe = await getStripe();

const response = await fetch('/api/stripe', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(cartItems),
});

if(response.statusCode === 500) return;

const data = await response.json();

toast.loading('Redirecting...');

stripe.redirectToCheckout({ sessionId: data.id });

}

return (

    {cartItems.length < 1 && (
      <div className="empty-cart">
        <AiOutlineShopping size={150} />
        <h3>Your shopping bag is empty</h3>
        <Link href="/">
          <button
            type="button"
            onClick={() => setShowCart(false)}
            className="btn"
          >
            Continue Shopping
          </button>
        </Link>
      </div>
    )}

    <div className="product-container">
      {cartItems.length >= 1 && cartItems.map((item) => (
        <div className="product" key={item._id}>
          <img src={urlFor(item?.image[0])} className="cart-product-image" />
          <div className="item-desc">
            <div className="flex top">
              <h5>{item.name}</h5>
              <h4>${item.price}</h4>
            </div>
            <div className="flex bottom">
              <div>
              <p className="quantity-desc">
                <span className="minus" onClick={() => toggleCartItemQuanitity(item._id, 'dec') }>
                <AiOutlineMinus />
                </span>
                <span className="num" onClick="">{item.quantity}</span>
                <span className="plus" onClick={() => toggleCartItemQuanitity(item._id, 'inc') }><AiOutlinePlus /></span>
              </p>
              </div>
              <button
                type="button"
                className="remove-item"
                onClick={() => onRemove(item)}
              >
                <TiDeleteOutline />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
    {cartItems.length >= 1 && (
      <div className="cart-bottom">
        <div className="total">
          <h3>Subtotal:</h3>
          <h3>${totalPrice}</h3>
        </div>
        <div className="btn-container">
          <button type="button" className="btn" onClick={handleCheckout}>
            Pay with Stripe
          </button>
        </div>
      </div>
    )}
  </div>
</div>

      return {
        price_data: { 
          currency: 'inr',
          product_data: { 
            name: item.name,
            images: [newImage],
          },
          unit_amount: item.price * 100,
        },
        adjustable_quantity: {
          enabled:true,
          minimum: 1,
        },
        quantity: item.quantity
      }
    }),
    success_url: `${req.headers.origin}/success`,
    cancel_url: `${req.headers.origin}/canceled`,
  }

  // Create Checkout Sessions from body params.
  const session = await stripe.checkout.sessions.create(params);

  res.status(200).json(session);
} catch (err) {
  res.status(err.statusCode || 500).json(err.message);
}

Server Error
TypeError: products?.map is not a function

{products?.map((product) => )}
Not able to figure out the solution.

plz anyone implement local storage functionality and share the code.

Hi

I almost finished this project, but I face this one issue and need help here.

My slug file

Hello, I'm on the Stripe payment part and I got into an Error saying:
Unhandled Runtime Error

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

const handleCheckout = async () => {
const stripe = await getStripe();

const response = await fetch('/api/stripe', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  
  **body: JSON.stringify(cartItems),** - !! I'm thinking this is causing the problem.
});

please help to fix

.

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])

https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript
--refer to the link for more info

Describe the bug

The sanity studio is deployed to localhost:3333 successfully with the included schemas visible, but on trying to edit the content of the schema it throws this error. TypeError: (0 , _validation2.validation) is not a function
PS.
I have tried reinstalling @sanity/cli multiple times, and even tried using the default e-commerce and blog-post schemas and this still also throws this same error so my schema is of no consequence to the error if the default produced the same error

Screenshots

Which versions of Sanity are you using?
@sanity/cli 2.34.0 (up to date)
@sanity/base 2.34.0 (up to date)
@sanity/core 2.34.0 (up to date)
@sanity/default-layout 2.34.0 (up to date)
@sanity/default-login 2.34.0 (up to date)
@sanity/desk-tool 2.34.0 (up to date)
@sanity/eslint-config-studio 2.0.0 (up to date)
@sanity/vision 2.34.0 (up to date)

What operating system are you using?
Windows 10 || 64bit

Which versions of Node.js / npm are you running?
npm - 8.6.0
Node - v18.0.0

.env file is not added to .gitignore
It have API Key
NEXT_PUBLIC_SANITY_TOKEN = skqX4kdZKQRvszcSCIm7xQgzfu7lab7cgdpdeVnHr3AZ1Bzhv40Mqf7lQWQis6Wh5rnb8NzWr6vyQ0enw9SJCCOeAkT18GCdE70DYw2YPhIF26U3TM02qPEoZm8zcy8vBhu3RAvZvTs2vYfGdO8lDGMszusMbsPdBKMYRN3WiXqfeeJqkvdK
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = pk_test_51Hqmw9EnylLNWUqj3gbIK3wHZBXqH0HegicIlGA0etfwS9a5JpESWoFucZHdnWMp0q6xq6thYSZghQUSpLkE46wJ00HrkNMsOV
NEXT_PUBLIC_STRIPE_SECRET_KEY = sk_test_51Hqmw9EnylLNWUqjP36GV1DkreuhVt1E4l7L1y7YwhvjES8OylYVpKjpIxTjv1FqKWq81pZWBjycNIJH9n1jfI7800n4seyJCH

Hi I got this error. I stated to follow the project yesterday. It was working fine but today when I start the project - it shows this error. I after searching in the net I got this solution on another project that I need to change the text in .babelrc.

sanity-io/sanity#3320 (comment)

So what went wrong I can't figure out.

[email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /data/node/ecommerce/ecommerce/.env
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /data/node/ecommerce/ecommerce/.babelrc
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module '@babel/preset-react
Require stack:
- /data/node/ecommerce/ecommerce/node_modules/next/dist/compiled/babel/bundle.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/compiled/babel/code-frame.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseScss.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack-config.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/dev/hot-reloader.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/dev/next-dev-server.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/next.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/lib/start-server.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/cli/next-dev.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/bin/next
    at loadPreset.next (<anonymous>)
    at createDescriptor.next (<anonymous>)

package.json

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/core": "^7.17.9",
    "@sanity/client": "^3.2.0",
    "@sanity/image-url": "^1.0.1",
    "@stripe/stripe-js": "^1.25.0",
    "canvas-confetti": "^1.5.1",
    "next": "12.1.0",
    "next-sanity-image": "^3.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0",
    "react-icons": "^4.3.1",
    "stripe": "^8.209.0"
  }
}

.babelrc

{
    "presets": ["@babel/preset-react"]
  }

.eslintrc.json

{
  "extends": [ "next/babel", "next/core-web-vitals"]
}

after completing the Navbar.jsx at 1:13:28 in the video it shows this error
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ReactDOMServerRenderer.render
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (4053:17)
ReactDOMServerRenderer.read
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/next/dist/server/render.js (751:45)
Object.defaultGetInitialProps
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/next/dist/server/render.js (389:51)
Function.getInitialProps
node_modules\next\dist\pages_document.js (145:19)
Object.loadGetInitialProps
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/next/dist/shared/lib/utils.js (69:29)
renderDocument
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/next/dist/server/render.js (764:48)
Object.renderToHTML
file:///C:/Users/Hamza/Desktop/ecommerce/ecommerce/node_modules/next/dist/server/render.js (828:34)
processTicksAndRejections
node:internal/process/task_queues (96:5

)

I think someone should make a pull request and add local storage functionality too for storing cart items.

After ending running terminal and running npm run dev again, I now have the following error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
It appears the environment variables are OK now and are not undefined.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ReactDOMServerRenderer.render
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (4053:17)
ReactDOMServerRenderer.read
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/next/dist/server/render.js (751:45)
Object.defaultGetInitialProps
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/next/dist/server/render.js (389:51)
Function.getInitialProps
node_modules\next\dist\pages_document.js (145:19)
Object.loadGetInitialProps
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/next/dist/shared/lib/utils.js (69:29)
renderDocument
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/next/dist/server/render.js (764:48)
Object.renderToHTML
file:///C:/Users/Amarachukwu/Desktop/Levi/my%20projects/E-commerce/e-commerce/node_modules/next/dist/server/render.js (828:34)
runMicrotasks

hello party people

I am stuck at 2:11. I should be able to see the added product into the cart but guess what I am getting this annoying error. I have tried everything I could double, but I couldn't find anything to fix it. I need your help here to continue.

Cheers. @adrianhajdin

I am receiving the following error while implementing Stripe: IntegrationError: Missing value for Stripe(): apiKey should be a string.
When I console.log the environment variable it is undefined. I copied the code from github so I do not believe the code is wrong. Thank you in advance!

Here is my getStripe.js file:
`import { loadStripe } from "@stripe/stripe-js";

let stripePromise;

const getStripe = () => {
console.log("test = ", process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
if (!stripePromise) {
stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
}

return stripePromise;

};

export default getStripe;
`

I was making this file, it worked fine but the toast said "(quantity) undefined added to cart" instead of the correct product name, So I tried copy pasting the stateContext.js file directly, same thing but in the video it worked just fine, how can I fix that?

export const StateContext = ({ children }) => {
  const [showCart, setShowCart] = useState(false);
  const [cartItems, setCartItems] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);
  const [totalQuantities, setTotalQuantities] = useState(0);
  const [qty, setQty] = useState(1);

  let foundProduct;
  let index;

  const onAdd = (product, quantity) => {
    const checkProductInCart = cartItems.find((item) => item._id === product._id);
    
    setTotalPrice((prevTotalPrice) => prevTotalPrice + product.price * quantity);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity);
    
    if(checkProductInCart) {
      const updatedCartItems = cartItems.map((cartProduct) => {
        if(cartProduct._id === product._id) return {
          ...cartProduct,
          quantity: cartProduct.quantity + quantity
        }
      })

      setCartItems(updatedCartItems);
    } else {
      product.quantity = quantity;
      
      setCartItems([...cartItems, { ...product }]);
    }

    toast.success(`${qty} ${product.name} added to the cart.`);
  } 

Keep getting this error in slug.current, I spend large time on this please help with this
slug.current is undefined here

I am getting error while using the command "npm install -g @sanity/cli"

When i click pay with stripe it show this error. TypeError: Cannot read properties of undefined (reading 'redirectToCheckout')

I'm facing an error, this error is actually in this repo.
when I click the "Add to cart" button and add a product to the cart it works fine,
After that when I select a second product from the suggestions and add that product to the cart after increasing the quantity of that product it works as expected and I can see two products in the cart list.

The error occurs when the second product is in the cart with quantity 3 or 4 and I decrease the quantity and add it to the cart again
I linked a URL of a video that will help you understand the problem
https://www.loom.com/share/19b3420698354d3eb12816fe68357a31

28bec69879e5475eac4d750d48dc3b31

Hi! i have been following the tutorial by the closest detail and attention possible.
Here is the error i keep on getting and sadly cannot find any solution for it.

Does somebody has a clue?
here is the error log from the VScode console

This is somehow an issue in [slug].js file.

null error - pages/product/[slug].js (13:10) @ ProductDetails TypeError: Cannot destructure property 'image' of 'product' as it is null. 11 | 12 | const ProductDetails = ({ product, products }) => { 13 | const { image, name, details, price } = product; | ^ 14 | const [index, setIndex] = useState(0); 15 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext(); 16 |

Thanks guys! i have been really spending seven hours trying to solve that and it got frustrating...

:)

In local host it works fine but in hosting it does not works

Hi,

The issue i want to solve is the product quantity does not update back to 1 once i move to a different product after adding current product to the cart

the issue can also be seen in the tutorial video

at 2:35:44 to 2:35:51

Product A quantity 5
Product B quantity still 5

Hello guys,

I have deployed the site and mostly it's all good except once i order products and proceed to payment enter the stripe test credentials the payment gets through with a green tick

but once the payment is done and instead of showing the success page with confetti animation it shows a black screen with only a few confetti going off ( maybe 5 6 } with the following msg

" Application error: a client-side exception has occurred (see the browser console for more information). "

when i run it locally it works fine i see the success page but on the deployed site this error shows up

for some reason when making a new NEXT js application, npm run dev doesn't work and the application closes in the terminal.

Lets say I add ItemA , ItemB or ItenC.... Cart works just fine.
Lets say i add ItemA or ItemB (existing cart item) again. Cart Icon shows increase in number of cart items. But if I click on cart icon I get the below error.
The code is same as adrian.

Hello, I was following the tutorial until I had an error. I thought maybe I made a mistake while I was writing the code but I tried to download this repository and change the sanity credentials and the problem is still there.

I fixed the product.jsx error changing a line:

<Link href={"/product/${slug.current}"}>

But, I can not fix the another error.

Hi! when I try to decrement the qty of a cart item I receive NaN. I couldn't figure out the bug after hours of trying. This is my code. Please let me know how I can fix it. Thank you.

I will link the video to loom over here and you can watch it once
https://www.loom.com/share/701a8b0c08144b34b4876296aa9a0a0c

I am getting this message when first hooking up sanity, it is not pulling up the products I have created with sanity.

Shouldn't you use promise.all in the ssr func inside the index.js so you can just get all the data at once instead of waiting for the previous one to finish?

I don't have any idea why is this happen even I already check all the code. for the first time i add to cart any items, it seems okay but, when select others items this error keep showing. if you don't mind, can you help me with this error?

After clicking on "Pay with Stripe" button the following error occurs: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.
I suspect it is because I am also getting a 400Bad Request too. The following code is my handleCheckout function in Cart.jsx:
`const handleCheckout = async () => {
const stripe = await getStripe();

	const response = await fetch("/api/stripe", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
		},
		body: JSON.stringify(cartItems),
	});

	if (response.statusCode === 500) return;

	const data = await response.json();

	toast.loading("Redirecting...");

	stripe.redirectToCheckout({ sessionId: data.id });
};`

for some reasons i cant deploy my app on vercel, something about incorrect peer dependencies i guess.I can provide other screenshots of my code or of the error if needed.i tried everything and it is still not working.

Also,something is wrong as an error show
warning " > [email protected]" has incorrect peer dependency "@sanity/client@^2.11.0".

but in the code you can see that my @sanity/client is ^3.2.0 not 2.11.0, and i dont know the reason for that.

or maybe the problem is

./components/index.js
00:00:45.671 | Module not found: Can't resolve './Product' in '/vercel/path0/components'
00:00:45.672 |  
00:00:45.672 | Import trace for requested module:
00:00:45.672 | ./pages/_app.js
00:00:45.672 |  
00:00:45.672 | ./pages/_app.js
00:00:45.672 | Module not found: Can't resolve '../context/StateContext' in '/vercel/path0/pages'
00:00:45.672 |  
00:00:45.672 | ./pages/product/[slug].js
00:00:45.672 | Module not found: Can't resolve '../../context/StateContext' in '/vercel/path0/pages/product'

where vercel cant resolve statecontext and other things for some reasons

please help

./context/StateContext.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\User\Desktop\e-commerce\ecommerce\node_modules\next\dist\build\babel\loader\index.js??ruleSet[1].rules[2].oneOf[2].use!C:\Users\User\Desktop\e-commerce\ecommerce\context\StateContext.js
    Used by 1 module(s), i. e.
    C:\Users\User\Desktop\e-commerce\ecommerce\node_modules\next\dist\build\babel\loader\index.js??ruleSet[1].rules[2].oneOf[2].use!C:\Users\User\Desktop\e-commerce\ecommerce\pages\_app.js
* C:\Users\User\Desktop\e-commerce\ecommerce\node_modules\next\dist\build\babel\loader\index.js??ruleSet[1].rules[2].oneOf[2].use!C:\Users\User\Desktop\e-commerce\ecommerce\context\stateContext.js
    Used by 1 module(s), i. e.
    C:\Users\User\Desktop\e-commerce\ecommerce\node_modules\next\dist\build\babel\loader\index.js??ruleSet[1].rules[2].oneOf[2].use!C:\Users\User\Desktop\e-commerce\ecommerce\pages\product\[slug].js
error - pages\product\[slug].js (17:10) @ ProductDetails
TypeError: Cannot destructure property 'decQty' of '(0 , _context_stateContext__WEBPACK_IMPORTED_MODULE_2__.useStateContext)(...)' as it is undefined.
  15 |   const { image, name, details, price } = product;
  16 |   const [index, setIndex] = useState(0);
> 17 |   const { decQty, incQty, qty } = useStateContext();
     |          ^
  18 |   return (
  19 |     <div>
  20 |       <div className="product-detail-container">

for some reason i am getting this error when i am trying to import and use any value from statecontext.js file, i dont know what the problem is