adrianhajdin/ecommerce

Learn how to build an incredible e-commerce webshop with an admin dashboard and CMS using Next 14, Stripe, TypeScript, and Payload CMS.

Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe

🌟 Become a top 1% Next.js 14 developer in only one course

🚀 Land your dream programming job in 6 months

ecommerce's Issues

error (payload): error: cannot connect to mongodb. details: querytxt etimeout

please help me to resolve this issue.
I've tried following this solution
https://stackoverflow.com/questions/61800062/error-querytxt-etimeout-when-connecting-to-mongodb-atlas-using-mongoose
but it's still not working.

Checkout Error

Hello i am having an error when i am trying to checkout
" ValidationError: The following field is invalid: purchases"
The error happens on handleSubmit function when i try to fetch orderReq (i am using postgress db)

Deployment issue - error [email protected]: The engine "node" is incompatible with this module.

Hello there!
I got issues trying to deploy the app with PayLoad.
I hace the latest version of node installed but when I deploy the app I get this:

[2023-12-27T12:50:50]
╭──────────── app build ───────────╼
[2023-12-27T12:50:50]
│ ---> Node.js Buildpack
[2023-12-27T12:50:50]
│ ---> Installing toolbox
[2023-12-27T12:50:50]
│ ---> Getting Node version
[2023-12-27T12:50:50]
│ ---> Resolving Node version
[2023-12-27T12:50:51]
│ ---> Reusing Node v16.20.2

and then

[2023-12-27T12:52:44]
│ error [email protected]: The engine "node" is incompatible with this module. Expected version ">=18.17.0". Got "16.20.2"
[2023-12-27T12:52:44]
│ error Found incompatible module.

If I understood correctly, the deplyment uses an older version of Node that is not compatible with next.
Any idea how to solve the issue?
Thanks in advance!

Cloned Payload template won't load: webpack compiled with 384 errors

Immediately get error when starting npm run dev. [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource

Looks like nothing is loading from the index.scss file in the payload folder.

Inconsistent Theme Application Based on URL Path

Hello,

I've encountered an inconsistency with the theme . When the URL is "localhost:3000/incorrect", the light theme is correctly applied. However, when the URL changes to "localhost:3000/incorrect/wrong", the application unexpectedly switches to a dark theme.

Upon inspecting the element, I noticed a media query on the body: @media (prefers-color-scheme: dark). This seems to be responsible for the switch to dark mode. However, I have attached some screenshots to illustrate the issue.

This behavior is not consistent with the expected behavior of the application, which should always apply the light theme regardless of the URL path.

My default browser theme is set to dark mode

Could you please help investigate this issue? Any assistance would be greatly appreciated.

Thank you!

Attachments: Screenshots illustrating the issue

Missing snippet code in index.module.scss for "app/_components/Footer/FooterComponent" ⚠

This isn't really an issue as it can be copied from the source code, just recommend that it gets added to the snippets for consistency :)

Hi, please i need help for resolving this error

⨯ src\app_components\Categories\index.tsx (18:28) @ map
⨯ TypeError: Cannot read properties of null (reading 'map')
at Categories (./src/app/_components/Categories/index.tsx:49:38)
at stringify ()
16 |
17 |

18 | {categories.map((category) => (
| ^
19 |
20 | ))}
21 |

Problem in BuildLogs

When i am pushing the code to gitHub, after starting of build process, i am getting this kind of errors

[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource

and mostly this kind of errors:

**23:1 Error: Replace ⏎import·classes·from·'./index.module.scss'; with import·classes·from·'./index.module.scss' prettier/prettier

 
[2023-12-09T14:19:25] | │ 24:1 Error: Run autofix to sort these imports! simple-import-sort/imports
 
[2023-12-09T14:19:25] | │ 26:52 Error: Delete ⏎ prettier/prettier
 
[2023-12-09T14:19:25] | │ 66:9 Error: Delete ⏎·········· prettier/prettier
 
[2023-12-09T14:19:25] | │ 74:1 Error: Delete ·· prettier/prettier
 
[2023-12-09T14:19:25] | │ 120:2 Error: Insert ⏎ prettier/prettier
 
[2023-12-09T14:19:25] | │ 120:2 Error: Newline required at end of file but not found. eol-last**

in the end i am getting this

error Command failed with exit code 1

and then build is getting failed

Disabling Dark Mode Switch in Code

Trying to disable dark mode switch in my project's code. Any guidance appreciated. Thanks!

I got this error when i try to setup what i need to do?

⨯ src\app_components\Categories\CategoryCard\index.tsx (22:45) @ url
⨯ TypeError: Cannot read properties of null (reading 'url')
at CategoryCard (./src/app/_components/Categories/CategoryCard/index.tsx:26:43)
20 | href="/products"
21 | className={classes.card}

22 | style={{ backgroundImage: url(${media.url}) }}
| ^
23 | onClick={() => setCategoryFilters([category.id])}
24 | >
25 |

{category.title}

Cart link shows twice on Header Nav when user logged in

Cart link shows twice when user logged in due to redundant call of CartLink component in Header

It seems that Payload will always display Cart in Header by default, but for the demo it is only display when the user logged in.

Which is the prefer way in scope of this demo?
Please clarify, thank you

No mobile nav?

In your video, the products part, you showed a different navbar, it was showing the hamburger menu with a shopping bag icon and also the featured section was different too, can you update this repo?

The live link doesn't work

I was checking the source code and wanted to see how the project is on production, but the live link of the project doesn't work. I don't know if this is an error or there is a reason behind it.

Just wanted to mention it.

Great project btw! 😄

Resolution of the dependencies is still posing issues

npm i @payloadcms/plugin-stripe @payloadcms/plugin-cloud
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @payloadcms/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/payload
npm ERR! payload@"^2.0.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer payload@"^1.1.8" from @payloadcms/[email protected]
npm ERR! node_modules/@payloadcms/plugin-stripe
npm ERR! @payloadcms/plugin-stripe@"^0.0.14" from the root
project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Shakkeer\AppData\Local\npm-cache_logs\2023-12-18T14_10_25_179Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\Shakkeer\AppData\Local\npm-cache_logs\2023-12-18T14_10_25_179Z-debug-0.log``

TypeError on categories.map is undefined.

i keep getting this TypeError error :

<div className={classes.list}>
> 19 |       {categories.map(category => (
     |                  ^
  20 |         <CategoryCard key={category.id} category={category} />

console logging categories is null. Parent [SLUG] index is also null all the payloads are followed the same as in the walkthrough.
Ran generate payloads and types and all are successful. don't get why categories are undefined/null and nothing renders unless i make the categories optional
Does anyone else have this issue/know how to fix it ?

Error Getting File from Cloud Storage

Last 10 minutes of the video, after entering the API keys from Payload inside the .env file we created in the beginning.

ERROR (payload): Error getting file from cloud storage
err: {
"type": "Error",
"message": "Missing required parameter USERNAME",
"stack":
InvalidParameterException: Missing required parameter USERNAME
at C:\Users\raven\Desktop\e-commerce-store\node_modules\amazon-cognito-identity-js\lib\Client.js:128:19
at processTicksAndRejections (node:internal/process/task_queues:95:5)
"name": "InvalidParameterException",
"code": "InvalidParameterException"
}

⨯ Internal error: Error: Invariant failed: You should not use <Link> outside a <Router>

Hello there!
I have this issue with the Nav Component.
When I run npm run dev I got a blank screen and the message above:
⨯ Internal error: Error: Invariant failed: You should not use outside a .
I know the problem is with the Button and the el property, cause when I remove it the code works but the button becames black.
Thank you in advance!

The admin should know the delivery address for the product you have to send that too