ed-roh / mern-social-media Goto Github PK
View Code? Open in Web Editor NEWComplete React MERN Full Stack Social Media App
Complete React MERN Full Stack Social Media App
i got this problem when i trying to add friend someone. but i don't get that when i add friend myself. how can i fix that ?
Hello! When I try to log in I get this error: "POST http://localhost:3001/auth/login 400 (Bad Request) Form.jsx:82". I did not change any of the backend code and I connected to mongodb, I even put your predefined users and posts in collections and tried one of them to log in and it is not working. What should I do?
Hello!
I have been following your excellent series on building a MERN stack application and it has been greatly informative. I've successfully built the application on my local system, and now, I would like to deploy it for wider access.
I am unsure about the deployment process, especially in terms of the right steps to take and the best platforms to use for hosting both the Node.js backend and the React frontend of my MERN stack application.
Could you provide guidance on the following:
Your help would be greatly appreciated. Thank you in advance!
Best,
capt-amlan-padhi
When I try to upload the images only the .png format is getting uploaded but not the other formats . I am getting the error ERR_UPLOAD_FILE_CHANGED .
I says friends.find is not a function
friends.find in in the Friends.jsx file
whenever I try to add friend I get the issue
I'm trying to migrate the tutorial to a new project with similar attributes, and part of that process was to use a different Collection name. When I try to insert a new user or record into the Database, it ALWAYS inserts into the "test" Collection, even if I delete it it re-creates it. I've searched everywhere for the "test" field in the code to replace it with my new collection name but having no luck. Anyone have any tips on how to configure this with mongoose?
Hello, I have a problem when i try to insert the data and save it throw an error "return callback(new MongoBulkWriteError(err, new BulkWriteResult(bulkOperation.s.bulkResult)));" and "MongoBulkWriteError: user is not allowed to do action [insert] on [test.posts]"
I've tried a lot of things but nothing work even when i copy paste the code. Any idea ?
I was trying to extend this project by adding messages functionality using socket.io. Can someone help me get started?
Hello! When I try to log in I get this error: "POST http://localhost:3001/auth/login 400 (Bad Request) Form.jsx:82". I did not change any of the backend code and I connected to mongodb, I even put your predefined users and posts in collections and tried one of them to log in and it is not working. What should I do?
At first, I thought this was a server-side error but when I use postman to insert data then there is no problem.
On entering the data from the front end on the register page, the server is not responding with anything and the front end also did not redirect to the login page as per the code logic in Form.jsx.
this error generated from this line of code
const isLiked = Boolean(likes[loggedInUserId]);
Is the site deployable as the images are not stored in the database, but rather in the assets folder in the server. So if I hosted this application in a hosting platform such as Netlify, will it work and if so then how?
Hi, when trying the auth/register in postman it brings out this error "error": "data and salt arguments required" kindly help
I don't understand why am I getting this error although I have written the exact code.
Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
deploy on Render, cant enter others' profile page, and cant refresh the page, they all will show NOT FOUND.
I just follow the video at the end of EDROH's next video-- MERN React Admin Dashboard, I deployed this one to render after deploying the server, and u will get a URL like this "https://[your service name].onrender.com", and then changed the localhost:3001 to this URL, it deployed success, but I get the issue as the title said.
so I had this issue while following the tutorial after creating the Navbar at @ed-roh 2:47:50
import { useState } from "react";
import {
Box,
Button,
TextField,
useMediaQuery,
Typography,
useTheme,
} from "@mui/material";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import { Formik } from "formik";
import * as yup from "yup";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { setLogin } from "state";
import Dropzone from "react-dropzone";
import FlexBetween from "components/FlexBetween";
const registerSchema = yup.object().shape({
firstName: yup.string().required("required"),
lastName: yup.string().required("required"),
email: yup.string().email("invalid email").required("required"),
password: yup.string().required("required"),
location: yup.string().required("required"),
occupation: yup.string().required("required"),
picture: yup.string().required("required"),
});
const loginSchema = yup.object().shape({
email: yup.string().email("invalid email").required("required"),
password: yup.string().required("required"),
});
const initialValuesRegister = {
firstName: "",
lastName: "",
email: "",
password: "",
location: "",
occupation: "",
picture: "",
};
const initialValuesLogin = {
email: "",
password: "",
};
const Form = () => {
const [pageType, setPageType] = useState("login");
const { palette } = useTheme();
const dispatch = useDispatch();
const navigate = useNavigate();
const isNonMobile = useMediaQuery("(min-width:600px)");
const isLogin = pageType === "login";
const isRegister = pageType === "register";
const register = async (values, onSubmitProps) => {
// this allows us to send form info with image
const formData = new FormData();
for (let value in values) {
formData.append(value, values[value]);
}
formData.append("picturePath", values.picture.name);
const savedUserResponse = await fetch(
"http://localhost:3001/auth/register",
{
method: "POST",
body: formData,
}
);
const savedUser = await savedUserResponse.json();
onSubmitProps.resetForm();
if (savedUser) {
setPageType("login");
}
};
const login = async (values, onSubmitProps) => {
const loggedInResponse = await fetch("http://localhost:3001/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(values),
});
const loggedIn = await loggedInResponse.json();
onSubmitProps.resetForm();
if (loggedIn) {
dispatch(
setLogin({
user: loggedIn.user,
token: loggedIn.token,
})
);
navigate("/home");
}
};
const handleFormSubmit = async (values, onSubmitProps) => {
if (isLogin) await login(values, onSubmitProps);
if (isRegister) await register(values, onSubmitProps);
};
return (
<Formik
onSubmit={handleFormSubmit}
initialValues={isLogin ? initialValuesLogin : initialValuesRegister}
validationSchema={isLogin ? loginSchema : registerSchema}
>
{({
values,
errors,
touched,
handleBlur,
handleChange,
handleSubmit,
setFieldValue,
resetForm,
}) => (
<form onSubmit={handleSubmit}>
<Box
display="grid"
gap="30px"
gridTemplateColumns="repeat(4, minmax(0, 1fr))"
sx={{
"& > div": { gridColumn: isNonMobile ? undefined : "span 4" },
}}
>
{isRegister && (
<>
<TextField
label="First Name"
onBlur={handleBlur}
onChange={handleChange}
value={values.firstName}
name="firstName"
error={
Boolean(touched.firstName) && Boolean(errors.firstName)
}
helperText={touched.firstName && errors.firstName}
sx={{ gridColumn: "span 2" }}
/>
<TextField
label="Last Name"
onBlur={handleBlur}
onChange={handleChange}
value={values.lastName}
name="lastName"
error={Boolean(touched.lastName) && Boolean(errors.lastName)}
helperText={touched.lastName && errors.lastName}
sx={{ gridColumn: "span 2" }}
/>
<TextField
label="Location"
onBlur={handleBlur}
onChange={handleChange}
value={values.location}
name="location"
error={Boolean(touched.location) && Boolean(errors.location)}
helperText={touched.location && errors.location}
sx={{ gridColumn: "span 4" }}
/>
<TextField
label="Occupation"
onBlur={handleBlur}
onChange={handleChange}
value={values.occupation}
name="occupation"
error={
Boolean(touched.occupation) && Boolean(errors.occupation)
}
helperText={touched.occupation && errors.occupation}
sx={{ gridColumn: "span 4" }}
/>
<Box
gridColumn="span 4"
border={`1px solid ${palette.neutral.medium}`}
borderRadius="5px"
p="1rem"
>
<Dropzone
acceptedFiles=".jpg,.jpeg,.png"
multiple={false}
onDrop={(acceptedFiles) =>
setFieldValue("picture", acceptedFiles[0])
}
>
{({ getRootProps, getInputProps }) => (
<Box
{...getRootProps()}
border={`2px dashed ${palette.primary.main}`}
p="1rem"
sx={{ "&:hover": { cursor: "pointer" } }}
>
<input {...getInputProps()} />
{!values.picture ? (
<p>Add Picture Here</p>
) : (
<FlexBetween>
<Typography>{values.picture.name}</Typography>
<EditOutlinedIcon />
</FlexBetween>
)}
</Box>
)}
</Dropzone>
</Box>
</>
)}
<TextField
label="Email"
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
name="email"
error={Boolean(touched.email) && Boolean(errors.email)}
helperText={touched.email && errors.email}
sx={{ gridColumn: "span 4" }}
/>
<TextField
label="Password"
type="password"
onBlur={handleBlur}
onChange={handleChange}
value={values.password}
name="password"
error={Boolean(touched.password) && Boolean(errors.password)}
helperText={touched.password && errors.password}
sx={{ gridColumn: "span 4" }}
/>
</Box>
{/* BUTTONS */}
<Box>
<Button
fullWidth
type="submit"
sx={{
m: "2rem 0",
p: "1rem",
backgroundColor: palette.primary.main,
color: palette.background.alt,
"&:hover": { color: palette.primary.main },
}}
>
{isLogin ? "LOGIN" : "REGISTER"}
</Button>
<Typography
onClick={() => {
setPageType(isLogin ? "register" : "login");
resetForm();
}}
sx={{
textDecoration: "underline",
color: palette.primary.main,
"&:hover": {
cursor: "pointer",
color: palette.primary.light,
},
}}
>
{isLogin
? "Don't have an account? Sign Up here."
: "Already have an account? Login here."}
</Typography>
</Box>
</form>
)}
</Formik>
);
};
export default Form;
can you add section like how to run
When I try to upload the images only the .png format is getting uploaded but not the other formats . I am getting the error ERR_UPLOAD_FILE_CHANGED .
I don't know why I am getting this error.
Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:66:1
at transformedStyleArg (createStyled.js:179:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
There is some problem in InputBase component
The line of code is :
color: (theme.vars || theme).palette.text.primary,
Can anyone explain me the solution?
Hey There,
I'm getting this error while posting Register request from this code:
const savedUserResponse = await fetch(
"http://localhost:5000/auth/register",
{
method: "POST",
body: formData,
}
);
need Help :(
My home page doesnt load when I log in. I get this error in the console:
Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
Hi, there when I run the client code after cloning this repo the entire application breaks and I have multiple errors in the console. I tried multiple time to run this application but the frontend code breaks everytime.
createPalette.js:275 MUI: The palette mode Light
is not supported.
createPalette @ createPalette.js:275
installHook.js:1861 MUI: The palette mode Light
is not supported.
overrideMethod @ installHook.js:1861
CssBaseline.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
Button.js:77 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at ButtonRoot.ownerState.ownerState (Button.js:77:1)
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
createPalette.js:275 MUI: The palette mode Light
is not supported.
createPalette @ createPalette.js:275
installHook.js:1861 MUI: The palette mode Light
is not supported.
overrideMethod @ installHook.js:1861
CssBaseline.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
Button.js:77 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at ButtonRoot.ownerState.ownerState (Button.js:77:1)
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at GlobalStyles (http://localhost:3000/static/js/bundle.js:20892:5)
at GlobalStyles
at CssBaseline (http://localhost:3000/static/js/bundle.js:9899:82)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at FormLabel (http://localhost:3000/static/js/bundle.js:11680:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at InputLabel (http://localhost:3000/static/js/bundle.js:13682:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at InputBase (http://localhost:3000/static/js/bundle.js:13013:83)
at OutlinedInput (http://localhost:3000/static/js/bundle.js:15911:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at FormLabel (http://localhost:3000/static/js/bundle.js:11680:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at InputLabel (http://localhost:3000/static/js/bundle.js:13682:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at InputBase (http://localhost:3000/static/js/bundle.js:13013:83)
at OutlinedInput (http://localhost:3000/static/js/bundle.js:15911:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:
at http://localhost:3000/static/js/bundle.js:4492:66
at Button (http://localhost:3000/static/js/bundle.js:8559:59)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
Hello, I followed your tuto step by step but I have an error.
Register is ok
Login give me a 400 response.
As I saw req.body is undefined. I m tryong to connect with postman. Any idea ?
i have this problem can some body help :
Uncaught TypeError: Cannot read properties of undefined (reading '6414c13f932a8a5a100ea491')
at PostWidget (PostWidget.jsx:30:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
6react-dom.development.js:18687 The above error occurred in the component:
at PostWidget (http://localhost:3000/static/js/bundle.js:2707:5)
at PostsWidget (http://localhost:3000/static/js/bundle.js:2969:5)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at HomePage (http://localhost:3000/static/js/bundle.js:714:87)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76956:5)
at Routes (http://localhost:3000/static/js/bundle.js:77378:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21055:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20768:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21074:5)
at Router (http://localhost:3000/static/js/bundle.js:77316:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75648:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83788:5)
at Provider (http://localhost:3000/static/js/bundle.js:73011:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading '6414c13f932a8a5a100ea491')
at PostWidget (PostWidget.jsx:30:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performSyncWorkOnRoot (react-dom.development.js:26096:1)
ff2cfa4e0d9d374d44ac7d58ca956909.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
When I try to register a new user and submit a form I got this error.
Server logs say:
::1 - - [23/Feb/2023:10:33:46 +0000] "POST /auth/register HTTP/1.1" 500 199
Error: ENOENT: no such file or directory, open 'p4.jpeg/p4.jpeg'
Also when I inspect the website, I see an error in the Form.jsx file.
Any idea how to fix this issue?
When I click on the add friend's icon, no action takes place
I upload files but i cannot add node modules
When i write npm install error happens like this
npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/diyapatel/Desktop/KJSCE/mernsocial-media-master/package.json npm ERR!
This is the initial state of profile page. The person logged in here is not a friend of the user who's profile is shown. Hence the friend list is empty.
After I click on add friend. I get the following friend list.
This is the friend list of the logged in user, which is obviously wrong.
First, this is a great video, thanks for putting so much effort into it.
I do notice some places that can be further improved:
on index.js,
I think we can replace those two lines that use body-parser to be the following:
app.use(express.urlencoded({ limit: '30mb', extended: true }));
app.use(express.json({ limit: '30mb' }));
p.s. bodyParser.json()
doesn't have an extended option
The new recommend algorithm for encrypting is Argon2id
now.
reference: https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#introduction
Client-side new User Not register. This register form is not submitted.
and
server-side also register form is not submitted and run the server page gives me this error.
::1 - - [20/Jan/2023:11:57:48 +0000] "GET / HTTP/1.1"
304 -
::1 - - [20/Jan/2023:11:57:48 +0000] "GET /static/js/main.152db27b.js HTTP/1.1" 304 -
::1 - - [20/Jan/2023:11:57:48 +0000] "GET /static/css/main.b62ea404.css HTTP/1.1" 304 -
Apparently, the add/remove icon is not updating even though the logged in user is in the friendlist. The code that handles the button state is here.
isFriend = friends.find((friend) => friend._id === friendId);
There's a couple things to note here.
friendId
has the values of all the friends passed one by one and it's used to check the isFriend
condition.friends
stores array of objects of users. These users are friends of the person displayed on the page, which could be the current logged in user or another user.find()
function returns the first item that matches the condition, and returns undefined
otherwise. So, isFriend
stores an object or undefind
according to the condition.Now, here's the problem. This code only works for home page, not for the profile page. Here's why.
friendId
has only one value passed into it, which might be loggedInUser id or id of person on profile page.friends
stores the friends of friendId
person. which is expected.isFriend
condition has a conflict. Finding a friend of a person who is the person himself in the friend list of that person doesn't seem like a valid logic. It's like finding yourself in your friend list. It should find the logged in user id in the friend list of that person. That way, it will check whether current user is friend with profile page user.How do we fixed it? It depends.
For me, I came up with this block of code.
if (friends.map((friend) => friend._id).includes(_id)) { isFriend = friends .filter((friend) => friend._id === _id) .map((friend) => friend._id) .includes(_id); }
if
checks whether we're in profile page or not, it doesn't check if we're in home page. It only checks whether we're in profile page or not. isFriend
now stores a Boolean
value, returned by the includes()
.
I opened this issue not to flex my solution (pardon me if I sounded like it), but to improve it. If you have any other solution, please let me know, it would be my honor.
My home page doesnt load when I log in. I get this error in the console:
Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
I run 'npm start' this command but it is not working
error: PS D:\Uneeb\git clone\mern-social-media> npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Uneeb\git clone\mern-social-media/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Uneeb\git clone\mern-social-media\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\HP\AppData\Local\npm-cache_logs\2023-05-13T19_46_50_952Z-debug-0.log
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.