Uncaught SyntaxError: Unexpected token '<' (at constants.js? using react + vite

i want to show the button in the sidebar with name and a icon. i was looping through the categories. categories was imported from the constants.js file from the utils folder. but instead of that it is showing the following error below. when i commented the code of categories array part everything works fine. installed react with vite

constants.js?t=1675529881066:18 Uncaught SyntaxError: Unexpected token '<' (at constants.js?t=1675529881066:18:24)

constants.js file

import MusicNoteIcon from '@mui/icons-material/MusicNote';
import HomeIcon from '@mui/icons-material/Home';
import CodeIcon from '@mui/icons-material/Code';

categories array

export const categories = [
  { name: 'New', icon: <HomeIcon /> },
  { name: 'JS Mastery', icon: <CodeIcon /> },
  { name: 'Music', icon: <MusicNoteIcon /> },
];

mapping through the categories in Sidebar.jsx component

{categories.map((category) => (
    <button>
        <span>{category.icon}</span>
        <span>{category.name}</span>
    </button>
))}

>Solution :

It seems that your vite project is not configured to process jsx in constants.js file. Try changing file name to constants.jsx.