in my code i am unable to get array of the api from rapid<> Kindly have a look here: https://github.com/hassannaveed327/Youtube-Clone-V3

The ChannelCard inside the ChannelDetail page links to http://localhost:3000/channel/undefined url

getting this following error while importing categories from contants
error: constants.js?t=1675529881066:18 Uncaught SyntaxError: Unexpected token '<' (at constants.js?t=1675529881066:18:24)

utils folder

export const categories = [
  { name: 'New', icon: <HomeIcon /> },
  { name: 'JS Mastery', icon: <CodeIcon /> },
  { name: 'Coding', icon: <CodeIcon /> },
  { name: 'ReactJS', icon: <CodeIcon /> },
  { name: 'NextJS', icon: <CodeIcon /> },
  { name: 'Music', icon: <MusicNoteIcon /> },
  { name: 'Education', icon: <SchoolIcon /> },
  { name: 'Podcast', icon: <GraphicEqIcon /> },
  { name: 'Movie', icon: <OndemandVideoIcon /> },
  { name: 'Gaming', icon: <SportsEsportsIcon /> },
  { name: 'Live', icon: <LiveTvIcon /> },
  { name: 'Sport', icon: <FitnessCenterIcon /> },
  { name: 'Fashion', icon: <CheckroomIcon /> },
  { name: 'Beauty', icon: <FaceRetouchingNaturalIcon /> },
  { name: 'Comedy', icon: <TheaterComedyIcon /> },
  { name: 'Gym', icon: <FitnessCenterIcon /> },
  { name: 'Crypto', icon: <DeveloperModeIcon /> },
];

Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
at Videos (http://localhost:3000/static/js/bundle.js:988:22)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:39676:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:42960:17)
at beginWork (http://localhost:3000/static/js/bundle.js:44256:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:29272:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:29316:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:29373:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:49237:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:48485:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:48408:9)
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
at Videos (http://localhost:3000/static/js/bundle.js:988:22)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:39676:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:42960:17)
at beginWork (http://localhost:3000/static/js/bundle.js:44256:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:29272:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:29316:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:29373:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:49237:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:48485:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:48408:9)
ERROR
Cannot read properties of null (reading 'map')
TypeError: Cannot read properties of null (reading 'map')
at Videos (http://localhost:3000/static/js/bundle.js:988:22)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:39676:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:42960:17)
at beginWork (http://localhost:3000/static/js/bundle.js:44256:20)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:49215:18)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:48485:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:48408:9)
at renderRootSync (http://localhost:3000/static/js/bundle.js:48381:11)
at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:47873:24)
at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:47786:26)

I am getting this error everytime I am trying to run the application. Can anyone Help?

It would be nice to have complete project of this so that users even logged or non-logged can enjoy fully just like they are on their browsers - but better. And also, support for injecting chrome extensions would be nice for example, for YT adblockers.

import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import ReactPlayer from "react-player";
import { Box, Typography, Stack } from "@mui/material";
import { CheckCircle } from "@mui/icons-material";

import { Videos } from "./";
import { fetchFromAPI } from "../utils/FetchFromAPI";

const VideoDetail = () => {
const [videoDetail, setVideoDetail] = useState(null);
console.log(videoDetail);

const { id } = useParams;

useEffect(() => {
fetchFromAPI(videos?part=snippet,statistics&id=${id}).then((data) =>
setVideoDetail(data.items[0])
);
}, [id]);

// if (!videoDetail?.snippet) return "Loading...";

// const {
// snippet: { title },
// } = videoDetail;
return (

<Stack direction={{ xs: "column", md: "row" }}>

<Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
<ReactPlayer
url={https://www.youtube.com/watch?v=${id}}
className="react-player"
controls
/>

{videoDetail.snippet.title}





);
};

export default VideoDetail;

This is the code
`import React from "react";
import { Stack, Box } from "@mui/material";

import { ChannelCard, VideoCard } from "./";

const Videos = ({ videos, direction }) => {
if (!videos?.length) return "Loading...";

return (
<Stack
direction={direction || "row"}
flexWrap="wrap"
justifyContent="start"
alignItems="start"
gap={3}
>
{videos.map((item, idx) => (

{item?.id?.videoId && }
{item?.id?.channelId && }

))}

);
};

export default Videos;`

Can any fix this for me?

None of my videos are showing up when i click on any video, nor when i click on the JS Mastery channel card. The console reads history.ts:487 No routes matched location "/channel/UCmXmlB4-HJytD7wek0Uo97A

I came across an issue where on my homepage / search results page on each reload or query returns same set of videos and no new videos are rotated in that pool

The page is loading same video for every channel. New video , js mastery and every other channel has the same video. The title is changed but the videos are same.

Can't get the data returned from the response to display on the video card components. Only demo data (demoThumbnailUrl, demoVideoUrl, demoVideoTitle, demoChannelUrl, demoChannelTitle) are displayed on each card without any issues.

please provide us with a new working dependencies

Specifying Variants in Typography tag of channel title for responsive size gives an error

the following code

<Typography variant={{ sm: "subtitle1", md: 'h6' }} color="#fff" >{channelTitle} </Typography>

will give an error of invalid prop variant passed

And also the channel title is rendered as a plain text

This can be solved by passing the typography inside the sx parameter as

<Typography sx={{typography: { sm: 'subtitle1', md: 'h6' }}} color='#fff'> {channelTitle}</Typography>

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=undefined with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

No data is fetching in the array

SO Who can help me with this.

the whole component always broke coz of we setVideos to Null at the begainning

It seems that we should modify the line: 55 in index.css

justify-content: start;

to

justify-content: flex-start;

or it would cause a compile warning

WARNING in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(55:3) autoprefixer: start value has mixed support, consider using flex-start instead

While the program still runs finely! Thanks for JSM!

If someone is using vite instead of CRA like I did, vite has some different way to set up environment variables so do look into it because it can generate unwanted errors.

Would suggest to use a config.js file for Rapid api key instead of using env variables to avoid those errors

Seems like there is some kind of API fetching problem (I have updated Axios to latest).
Please help!