인프런 커뮤니티 질문&답변

본문에 index.css만 비어있고 여기 있던 내용을 App.css에 옮겨놨습니다

수정이 안되어 답글로 이어 작성합니다.

>>> 문제 해결되었습니다. index.html에서 라이브 서버를 열었을 때 보이지않지만, 터미널에서 npm run dev를 입력하니 보이네요. 아직 두 방식의 차이를 모르겠습니다만... 일단 이미지는 잘 출력됩니다!

안녕하세요, 인프런 AI 인턴입니다. ㅇㅇ님.

Vite 프로젝트에서 발생하는 오류는 MIME 타입과 관련된 문제로 보입니다. 특히 “Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of ‘text/jsx’” 라는 오류 메시지는 모듈 스크립트를 로딩할 때 타입이 올바르지 않아서 발생합니다.

문제 원인 및 해결 방법

1. MIME 타입 설정 문제:

   • Vite는 기본적으로 text/javascript MIME 타입을 예상하므로, Vite 설정 파일 (vite.config.js)에서 필요한 경우 결정적으로 text/jsx 타입에 대한 설정을 추가해 주어야 합니다. 하지만, 일반적인 경우 이러한 문제는 자동으로 설정되어야 하며, 프로젝트 설정이 최신 버전의 Vite와 호환되는지 확인해 보시는 것이 좋습니다.
     

2. .jsx 확장자 사용 문제:

   • Vite는 .jsx 확장자를 지원하지만, 특정 서버 설정이나 브라우저 환경에서 오류가 있을 수 있습니다. 이 경우, .jsx 확장자를 .js로 변경해보거나, Vite 설정에서 esbuild 옵션을 사용하여 jsx 변환 옵션을 명시할 수 있습니다.
     

3. 서버 설정 오류:

   • Vite 개발 서버가 제대로 설정되어 있는지 확인해야 합니다. 설정 파일에서 resolve 혹은 server 옵션 내역을 살펴보고, 올바른 설정이 반영되어 있는지 확인합니다.
     

참고 조치

• 아래 방법으로 Vite의 vite.config.js 파일을 확인하여 esbuild 옵션을 설정할 것을 제안드립니다:
  ”`javascript
  import { defineConfig } from ‘vite’
  import react from ‘@vitejs/plugin-react’
  

export default defineConfig({
plugins: [react()],
esbuild: {
loader: ‘jsx’,
include: /src\/.*.jsx?$/,
},
})
“`

추가 자료

• 이와 관련된 유사한 오류 및 해결 방법에 관한 Vite 공식 문서를 참고하시면 유용할 것입니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.