Currently, I am utilizing shadcn/ui components to develop the frontend for my NextJS 14 project. However, upon attempting to add any component using the command:
npx shadcn-ui@latest add navigation-menuDespite trying this solution, the issue persists. Can anyone provide guidance on how to resolve this?
The desired outcome is for a navigation-menu.jsx file to be generated under src/components/ui folder if the command executes successfully.
If you are facing this issue, it may be related to permissions. To resolve this, navigate to the project folder in your terminal and execute the following command:
sudo chmod u+w project-folder-name
Additionally, consider checking for any import alias problems as suggested by Meet Akbari. You can fix this by updating your jsconfig.json file with the following configuration:
{
"compilerOptions": {
"paths": { "@/*": ["./*"] }
}
}
Looking to replicate the steps outlined in this guide: https://medium.com/@_hanglucas/file-upload-in-next-js-app-router-13-4-6d24f2e3d00f for file uploads using Next.js, encountering an error with the line const formData = await req.formData();. The error ...
Has anyone else come across this error message while using next/auth version 3.27.3 in their app? error - unhandledRejection: ReferenceError: defaultCookies is not defined at C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-pr ...
As I was following a tutorial to set up a blogging site, I integrated NextAuth with Google and MongoDB for user sign-up. Everything seemed to work fine until I encountered an issue when trying to retrieve the _id from MongoDB and assign it to the session u ...
"Access to XMLHttpRequest at 'http://localhost:3000/campgrounds/6411f03e718f68104cac045a' (redirected from 'http://localhost:5000/campgrounds') from origin 'http://localhost:3000' has been blocked by CORS policy: Response ...
Currently, I am working on a React/Next.js project and incorporating MUI for the design elements. <Link href="/products"> <ListItem disablePadding> <ListItemButton> <ListItemIcon> ...
Within my functional component, I am utilizing the useState hook to store state. When the user reaches the bottom of the page, I want to dynamically add content. To achieve this, I implemented an EventListener for 'scroll' within a useEffect hook ...
I encountered an error when connecting to mongo atlas, but everything works fine with a local database. Please refer to the image of the db connection and the terminal error for additional details. dbconnect.ts import mongoose from "mongoose"; ...
Utilizing PostCSS along with postcss-preset-env (now integrated into postcss-plugins monorepo) and postcss-custom-media enables the declaration of global breakpoints once, making them accessible within CSS Modules across the project. The documentation for ...
I have two similar pages, with one having an additional element to display while the other does not. These pages are static and do not involve private user data or authentication. My goal is to show one of these pages under the same URL, based on a parame ...
I need some guidance on how to redirect a URL in an express.js configuration. Here's the scenario: The URL is: profile/myname To forward to my page profile.js, I use the following code in my express.js config: server.get('/profile/:username&ap ...
I recently retrieved some data from a public API using useSWR and now I need to manipulate it. In the past, I would update the state with the API response and then simply overwrite it when performing operations. Now, I want to be able to sort the data by ...
I need to conditionally show the logout button only if a user is logged in. Here is my _app.js file: import React from "react"; import App from "next/app"; import Navbar from "../components/navbar"; import Layout from "../components/layouts/mainLayout"; ...
I encountered an issue with the following code snippet: export const getStaticProps: GetStaticProps<HomeProps> = async () => { const firstCategory = 0; const { data }: AxiosResponse<MenuItem[]> = await axios.post( ...
I am currently in the process of developing an API using Next.js and Prisma. Within this project, I have defined two models - one for users and another for profiles. My goal is to create a new user along with their profile by fetching data from req.body th ...
When I try to initialize a const, I encounter a "window is undefined" error in nextjs. To resolve this issue, I have attempted the following code: if (typeof window !== "undefined") { const web3Modal = new Web3Modal({ network: "mainnet&q ...
I have set up a NestJS backend with a NextJS frontend, both hosted separately. NestJS Backend To enable CORS in the backend, I included the following code: app.enableCors({ credentials: true, origin: process.env.FRONTEND_URL }); After checking the CORS ...
I am encountering an issue with my page (server component) that retrieves data from a route handler (/api/v1/bookings/get) within my application. While everything runs smoothly with next dev --turbo, deploying to Vercel results in the following error: App ...
Encountering an error in my Next.js project. www.~~~.com/_next/static/YzkQBtj6rd9b69Th7lZs0/pages/index.js net::ERR_ABORTED 404 (Not Found) It seems that I have set up Next.js on www.~~~.com/beta However, it is trying to call root from www.~~~.co ...
I am attempting to upload an image file to a cloudinary API within a Next.js application: The function calling the API is as follows: async uploadButtonClicked(imageUpload) { const formData = new FormData(); //formData.append('test', ...
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSearch, faAmbulance, faAnchor, faPlus, faFloppyDisk, } from '@fortawesome/free-solid-svg-icons'; import { Input, Table, Button, Modal, Moda ...