CODEWITHSUNDEEP
javascriptnode.jsreactjsmaterial-uivite
Krishnadev. V
Krishnadev. V

Reputation: 554

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>
))}

Upvotes: 1

Views: 3967

Answers (1)

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18696

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

Edit:

Rather than changing the extension from js to jsx, you could add this configuration for vite to process jsx in a js file here https://stackoverflow.com/a/71945129/8339172

Upvotes: 4

Related Questions