Questions tagged [mern]

As a beginner in front-end application development, I recently created a MERN application in React with separate frontend and backend parts. Everything is working smoothly, but now I want to convert it into a desktop application that can run independently ...

Can someone help me with redirecting users after authentication based on their role using user.role? I am encountering the following error message: UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to t ...

Seeking guidance on clearing a cookie after the 15-second lifetime of a JWT token. Is this task best accomplished on the server side or can it be managed on the client side? Code snippet with description provided below Utilizing mongoose, a user model is ...

Incorporating Stripe Checkout functionality into a MERN application has been the focus of my recent project. Upon successful payment by a customer, they are directed to a checkout success URL where the CheckoutSuccess page is displayed. Additionally, Stri ...

Recently, I encountered an error message that prevents me from using 'import' in my front end code when trying to execute 'node index'. This issue never occurred before, and it only arose when I returned to this project. In my backend ...

I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here. Below is my code: export default function Upload() { const [state, setState ...

Currently in the process of developing a MERN-stack app, but encountering issues with the delete request function. Here is the relevant code snippet: Upon attempting to send a delete request via Postman, an error message is displayed. I have researched ...

I'm currently facing an issue while trying to deploy my Node.js app that includes some getter and setter functions. Despite selecting the Node.js environment on Heroku and providing all necessary environment variables, I keep encountering errors related to ...

I have reviewed several articles discussing the issue of asynchronous calls returning undefined. Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference Get data from fs.readFile However, none of these articles ...

Below is the error message from the console log: An Error was encountered: Objects are not valid as a React child (found: object with keys {_id, inputText, __v}). If you intended to render a collection of children, please use an array instead. at throwOnIn ...

Currently, I am developing a full-stack project utilizing a next.js application for the front-end and a node/express server for the API. The front-end and back-end are running on separate ports. Here is how my application is configured: https://i.stack.im ...

Having trouble deleting comments within a single post? I keep encountering a 404 Error and I'm not sure why the post is not being found. I really need some assistance in figuring out what's causing this issue and why I'm unable to delete a comment from a p ...

Currently, I am working on a project that utilizes the MERN stack - MongoDB, Express, React, and Node. However, I have encountered an issue when attempting to post data from a form in a React component to an API endpoint defined in Node.js. Upon submission ...

I was attempting to upload an image to the backend using Multer. I have reviewed the backend code multiple times and it appears to be correct. Could there be an issue with my front-end code? Here is a POST code snippet: const response = await fetch('http: ...

After logging in, I encounter a white page displaying the error ChatLogics.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '_id'). Oddly enough, upon refreshing the page once, the error vanishes. Why is the _id undefined rig ...

I am currently integrating Google Identity Services for login on my website. I am facing an issue where the .then function is being executed before the Promise returned by the async function is resolved. I have temporarily used setTimeout to manage this, b ...

Explaining the question - I am successfully registering users in a mongoDB database and generating an accessToken [jwt based]. However, when trying to query the database to fetch the list of users, I encounter the error: jwt is not defined. Also, mentioni ...

Is there a way to dynamically adjust the background color of text based on the status value? Currently, when the status is pending, the background color defaults to yellow. For example, if the status changes to complete, I want the background color to ch ...

I recently used Brad Traversys Guide to create a basic MERN Stack App with React.js, Redux.js, Node.js, Express.js, and MongoDB using create-react-app and Mlab. The app functions perfectly on my local server without any issues, but I am facing difficulties ...

I'm having an issue with my Node.js Express project where I keep getting a 'Cannot GET /' error on Localhost. Below is the content of my server.js file: console.clear(); const express = require("express"); const app = express(); c ...

In my reactjs application, I added a button to delete user accounts. When the button is clicked, a form appears where users need to enter their password and click on Delete to confirm. However, when testing this feature, clicking on the Delete button does ...

Recently, I started working on a MERN app using Express. While creating the server with Express, I encountered an error. const express = require("express"); const app = express(); const PATH = require("path"); const LAYOUT = require(&qu ...

Currently, I am in the process of designing the database for my MERN application (which employs Next.js in addition to React.js). The main purpose of my app is to serve as an LMS (Learning Management System) where educators can post assignments, tests, r ...

Securing certain express routes with Passport.js authentication Steps for authenticating specific routes in Passport.js Looking for a method to authenticate particular routes using Passport.js Your assistance is greatly appreciated... ...

Here are the snippets of code for a Node.js application: // src/models/workoutsModel.js const mongoose = require("mongoose"); const Schema = mongoose.Schema; const workoutSchema = new Schema({ title: { type: String, required: true, ...

After exploring the MERN framework for a new project, I have encountered some discouraging issues. Following the setup instructions using mern-cli, the project is created and runs correctly. However, when trying to execute... npm run test The following e ...

Whenever I try to click on a product from the HomeScreen.js, it is supposed to take me to the ProductScreen in order to display the detailed information of the product. However, I encountered the following error message: Converting circular structure to J ...

I encountered the following issue while running my MERN app: WebSocket connection to 'ws://localhost:3000/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established. I am unsure of how to establish ...

Currently, I am diving into the world of MERN Stack web development and running into a unique issue. When using Postmate to input data from the body to the database, everything works smoothly when done from the server.js file. However, when attempting the ...

Currently, I am in the process of creating a message board for practice purposes and have successfully implemented notifications and a chat application using socket.io. My next goal is to add basic video call functionality, but I have encountered some dif ...

What is the best way to develop a chat application for direct communication between two individuals? For instance, imagine a website with numerous producers where a consumer wishes to engage in a live chat with a specific producer. Any ideas on how to ach ...

I have a React application running on localhost:3000. Within this app, I am making a GET request using axios to http://localhost:5000/fblogin. const Login = () => { const options = { method: "GET", url: "http://localhost:5000/fblogin", ...

After completing my first MERN CRUD app as a beginner, which is a todo list with a complete button that scores out items, I am looking for ways to enhance it. Currently, when the complete button is clicked, a post request is sent to the nodejs/express ba ...

I'm attempting to load an image from a file inline because I need to pass data (the image name), but nothing seems to be working. It doesn't work whether the image is inside the src folder or outside in the public folder. Here's what I tried recently: < ...

Here is the frontend code snippet: { (opp||[]).map(opps=>{ return( <div className="card OppCard"> <div className="card-body" > <h4>{opps.title}</h4> <p><b&g ...

Currently, I am in the process of mastering the MERN stack by developing a straightforward shopping list application. My API is set up to handle GET, POST, and DELETE requests successfully, as confirmed through Postman testing. Locally, I can retrieve it ...

An Error Occurred Connection Successful, Port 4000 Listing Form node:internal/errors:464 ErrorCaptureStackTrace(err); ^ TypeError [ERR_INVALID_ARG_TYPE]: The argument for "path" must be a string. Instead, received a TypeError instance. at new NodeError ...

Despite exhausting all methods to assess time in my mern application, I have yet to find a solution. My search online has also been fruitless... ...

Bundle of scripts in package.json "scripts": { "begin": "node back-end/server.js", "serve": "nodemon back-end/server.js", "client-initiate": "npm start --prefix front-end", ...

I'm facing an issue while trying to send a POST request to the /api/notes/addnote endpoint. The server is returning a 404 Not Found error. I have checked the backend code and made sure that the endpoint is correctly defined. Here are the specifics of ...

After successfully creating an Express and MongoDB API and connecting it to my React Application, I encountered a situation during deployment. It seems that I need to deploy both projects separately, which means I would need two hosting plans for them. H ...

I am facing an issue where I want to update an object inside the fetchAll() functions and then send it back after successful updation. However, the response I receive is '[]'. var ans = [] Country.fetchAll(newdate,(err, data) => { if (err) ...

I successfully deployed my MERN stack application on Heroku using the following code: import express from "express"; import path from "path"; const app = express(); const port = process.env.PORT || 5000; app.get("/health-check&qu ...

Currently, I am working on developing a social media app with Vite. However, I am facing challenges when trying to deploy it. I have included my vite.config.js file below for better insight into the issue at hand. The main issue is that while the ./ route ...

During the process of deploying my app to Heroku, everything seems to be running smoothly until I encounter an issue. After logging in, I execute a series of terminal commands for deployment and receive the following responses: heroku login heroku: Press a ...

Encountering an issue while attempting to save the second document to MongoDB Atlas. The error message reads as follows: Error:MongoError: E11000 duplicate key error collection: test.orders index: orderId_1 dup key: { orderId: null } Despite having no un ...

As a student still learning, I'm in need of assistance with a project. When I deploy the system and run the build, the initial page works fine but all redirects fail to work. If you'd like to view the page, it's available at: I'm seei ...

When it comes to imports, is there a distinction between using single quotes (') versus double quotes ("), for example in import React from 'react'; and import React from "react";? Are there any notable differences? ...

I've run into a problem with client-side data fetching on my Next.js 14 project. More specifically, I'm trying to retrieve user profile information from a backend API using Axios within a component, but for some reason, the data isn't coming ...

I've been building an inventory system using the MERN stack. However, when I attempt to view products with the code below, it always returns 'No Matching Product' even though there are matching products in my collection. The backend works fine when tested ...

I've spent a lot of time scouring the internet for a solution to my problem, but it seems like maybe I'm not asking in the right way. My project involves creating a Node-Express website where ReactJS is only needed on specific pages, while the rest are se ...

//search.js file import axios from "axios"; export function storeInput(input, callback) { //input = document.getElementById("a").value; let result = []; console.log(input); if (!callback) return; axios.post("ht ...

After deploying my MERN app on Heroku, I encountered a 404 page error when trying to access specific routes by entering their URLs directly. The navbar links function correctly and lead me to the sign-in and sign-up pages without any issue. However, clicki ...

Struggling with creating dynamic material UI payment elements, I wanted to share how I successfully achieved this. You can access the code for these elements on the material UI website. https://i.stack.imgur.com/kYewa.png Below is an example of static da ...

In the process of working on my assignment, I am in the midst of developing a web application. As someone who is new to using React, I'm currently trying to figure out how to modify my navbar once a user has logged in. For instance: Prior to logging ...

* **> const PORT=8000 const express = require('express') const {v4:uuidv4}=require('uuid') const bcrypt =require('bcrypt') const jwt =require('jsonwebtoken') const cors=require('cors') const {MongoClie ...

I am a novice attempting to manage JWT verification. Within the function below, my goal is for the system to generate a new access token based on the refresh token if the user's access token has expired. import { asyncHandler } from "../utils/asy ...

I'm encountering an issue while trying to set up @mui/material npm install @mui/material However, during the installation process, I am getting this error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ...

Currently, I am in the process of developing an application utilizing the Mern stack. One of the recent tasks I have accomplished is sending a POST request from the React frontend to the endpoint using Axios. The snippet provided below showcases the code f ...

Looking to incorporate Swipeable edge into a SwipeableDrawer: Browse the example here The intention is for the edge to remain visible even when the drawer is closed, allowing users to click on it and slide the drawer open. However, in my application, t ...

I am encountering an issue in my Mern Stack Project where I can successfully create a Lesson using Postman, but when trying from my browser, I get a 500 error in the network tab. The console displays CORS error and another 500 error. I have tried various s ...

My friends and I recently launched a small startup and I developed a customized todo app for our team. I wanted to avoid the costs and challenges of uploading the application online, so I came up with an idea. What if I could replicate the project on all ...

I am experiencing some issues with saving data from a React form. In the backend, I can only save the auto-generated ID from Mongoose. The API is not saving email and password in the database, as when I log the request body in the server it shows an empty ...

I have successfully dockerized my reactjs app and express app. Check out the docker-compose.yml file I used: version: "3" services: client: image: react-app build: ./client ports: - "3000:3000" volumes: ...

I am trying to store details in MongoDB and upload images to an "images" folder using Multer, but I am facing issues with retrieving the data on the server-side. const onSubmit = async (object) => { const fd = new FormData() fd.append('n ...

I have created a React component "class" based poll, but I am looking to convert it into a React hook form. Can someone please help me with this? I'm having trouble understanding how to achieve this. import React, { Component } from "react"; im ...

I encountered the you need to enable javascript to run this app error in my MERN stack application. Every aspect works well except for an API call made for a specific route. I utilize the axios package and all API calls within the application successfully ...

In the process of developing a meal planning application, I am faced with the challenge of utilizing the same modal component for both adding and editing meals. The modal contains fields for name, ingredients, and the day of the week for meal preparation. ...

I am trying to link a website to a button using an iframe. This website allows access to all domain names. Below is the code for my button: <Button component={NavLink} activeClassName={classes.activeBtn} to="/searchEngine&qu ...

Yesterday marked the beginning of my journey learning react. I initiated a new react app by executing the command npx create-react-app firstapp. Upon opening the console in my Firefox browser, I noticed the message: [HMR] Waiting for update signal from ...

After configuring my ExpressJS & MongoDB client and running Nodemon, I consistently encounter the following warning: "DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the ...

I have integrated socket io into my MERN stack application to facilitate communication between the client and server. Essentially, I am monitoring changes in my mongodb cluster and sending those updates to the client using the socketio emit function. Howev ...

Hello everyone, I am currently in the process of building an API using EXPRESS.JS and MongoDB. While testing with postman, I encountered an issue where the req.body.password field is undefined when attempting to parse it using postman. Strangely enough, I ...

I'm facing an issue in my react app where I can't read the HTML tags used in the content of a JSON file. Here's a snippet of the JSON file: [{ "_id": 9, "title":"Text 9", "subheader":"Dummy header 9", "images": "images/ ...

UPDATE: After attempting different ports, terminating tasks on ports, and trying again, I am still unable to connect. Today, I embarked on a tutorial for the MERN stack but unfortunately, I am unable to establish a connection to the server. Upon using npm ...