skip to Main Content

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.

youtube sidebar

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


  1. I have noticed some issues in constant.jsx.

    1. Unexpected comma here, almost in each element { name: 'New', icon: <HomeIcon />, },.
    2. You did not add ; at the end of the last line.

    Try using this code:

    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';
    
    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 /> },
    ];
    
    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';
    
    Login or Signup to reply.
  2. import {
      Home as HomeIcon,
      Code as CodeIcon,
      OndemandVideo as OndemandVideoIcon,
      SportsEsports as SportsEsportsIcon,
      LiveTv as LiveTvIcon,
      School as SchoolIcon,
      MusicNote as MusicNoteIcon,
      GraphicEq as GraphicEqIcon,
      FitnessCenter as FitnessCenterIcon,
      Checkroom as CheckroomIcon,
      FaceRetouchingNatural as FaceRetouchingNaturalIcon,
      TheaterComedy as TheaterComedyIcon,
      DeveloperMode as DeveloperModeIcon
    } from '@mui/icons-material';
    
    export const categories = [
      { name: 'New', icon: HomeIcon }, // No JSX
      { 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 },
    ];
    

    Then, when you render the icon in your component, you can call it as a component, like this:

    {categories.map((category) => (
      <div key={category.name}>
        <category.icon /> {category.name}
      </div>
    ))}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search