I am building a react web app and i am getting SyntaxError: Unexpected token ‘<‘ when importing react components that are in an array object from ‘..utils/constants’ .js file.
My code is something like:
// SideBar.jsx
// React Component
import { Stack } from '@mui/material'
import { categories } from '../utils/constants'
export default function SideBar() {
return (
<div>
Sidebar
</div>
)
}
// constants.js
// this is my file containing icons imported from material UI.
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import HomeIcon from '@mui/icons-material/Home';
import CodeIcon from '@mui/icons-material/Code';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import LiveTvIcon from '@mui/icons-material/LiveTv';
import SchoolIcon from '@mui/icons-material/School';
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import GraphicEqIcon from '@mui/icons-material/GraphicEq';
import TheaterComedyIcon from '@mui/icons-material/TheaterComedy';
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
export const logo = 'https://i.ibb.co/s9Qys2j/logo.png';
// I am getting error here
export const categories = [
{ name: 'New', icon: <HomeIcon />, }, // Error comes from icons
{ 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 />, },
];
export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png';
export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A';
export const demoVideoUrl = '/video/GDa8kZLNhJ4';
export const demoChannelTitle = 'JavaScript Mastery';
export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI';
export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png'
// package.json
{
"name": "youtube_clone",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.1",
"@mui/material": "^6.1.1",
"axios": "^1.7.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-player": "^2.16.0",
"react-router-dom": "^6.26.2",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"@eslint/js": "^9.9.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^9.9.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"vite": "^5.4.1"
}
}
logs
Uncaught SyntaxError: Unexpected token '<' (at constants.js?t=1727009474696:18:24)
I am building a youtube clone. what this specific component will do is display categories on the sidebar like in youtube.
I want to import ‘categories’ array from util/constants.js file and display icons and category name in the sidebar.
If I comment the categories array everything works fine. but when it is not commented it gives me { SyntaxError: Unexpected token ‘<‘ }
I have tried importing icons directly in my react component file and they are working fine like this.
What I want is to import all these icons from the js file and map them in my React component.
I used vite to build my react file.
2
Answers
I have noticed some issues in
constant.jsx
.{ name: 'New', icon: <HomeIcon />, },
.;
at the end of the last line.Try using this
code
:Then, when you render the icon in your component, you can call it as a component, like this: