[React.js] .js 파일에서 Uncaught SyntaxError: Unexpected token '<' 오류 발생할 때 해결 방법 (Vite)

.js 파일에서 Uncaught SyntaxError: Unexpected token '<' 오류 발생할 때 해결 방법 (Vite)

들어가며

• @.js@ 파일에서 @Uncaught SyntaxError: Unexpected token '<' @ 오류가 발생할 때, 해결하는 방법을 정리해본다.
• 이 문제는 Vite로 만든 프로젝트에 발생하는 문제이다.

 

 

문제 발생 상황

• @/src/utils/links.js@ 파일에서 컴포넌트(Component)가 @value@로 들어 있는 @key@가 들어 있는 객체를 외부 컴포넌트에서 import 하여 사용하려고 할 때, 다음과 같은 오류가 발생하였다.

오류 발생 모습

 

/src/utils/links.js

• @icon@ 키의 값을 외부 컴포넌트에서 불러올 때 위와 같은 오류가 발생하였다.

const links = [
  {
    id: 1,
    text: 'stats',
    path: '/',
    icon: <IoBarChartSharp />,
  },
  // ...
]

 

문제 해결 방법

• Vite 설정 파일(@vite.config.js@)에서 @.js@ 파일을 @.jsx@ 파일로 인식하도록 하는 설정을 추가해주면 된다.
• Vite 설정 파일은 프로젝트 최상위 경로(@/@)에 있다.

/vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import fs from 'fs/promises';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            src: resolve(__dirname, 'src'),
        },
    },
    esbuild: {
        loader: 'jsx',
        include: /src\/.*\.jsx?$/,
        exclude: [],
    },
    optimizeDeps: {
        esbuildOptions: {
            plugins: [
                {
                    name: 'load-js-files-as-jsx',
                    setup(build) {
                        build.onLoad(
                            { filter: /src\\.*\.js$/ },
                            async (args) => ({
                                loader: 'jsx',
                                contents: await fs.readFile(args.path, 'utf8'),
                            })
                        );
                    },
                },
            ],
        },
    },
    plugins: [react()],
});

 

참고 사이트

Error: Unexpected "<" in vite react in JS files