인프런 커뮤니티 질문&답변
작성한 질문수
Failed to load module script 에러가 뜹니다
해결된 질문
작성
·
147
·
수정됨
0
오늘 카운터앱 강의를 들으면서 새로운 파일 (section06)을 만들었는데요.
가장 기본 세팅을 하고 화면에 카운터앱 이라는 단어를 렌더링 하려고 npm run dev를 한 후 ctrl shift p 를 눌러 페이지에 들어갔는데 글자가 렌더링 되지 않길래 개발자 도구를 켜 보았더니
Failed to load module script : Expected a JavaScript module script but the server responed with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTMl spec.
라는 오류가 뜨네요. 오류 해결을 위해 업데이트도 해보고, 파일을 지웠다 새로 만들어도 보고, 지피티에 물어보거나 인터넷에 검색도 해봤는데 도저히 오류가 고쳐지지 않습니다.
혹시나 해서 이번에 새로 만든 파일 말고 section05 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉
답변 4
0
안녕하세요 이정환입니다.
Coding bear님의 말씀처럼 JSX 확장자 먼저 체크해 보신 다음 (강의와 동일하게 해 주시면 됩니다)
그래도 안될 경우 저에게 프로젝트 파일을 전달해주시면 체크해보겠습니다.
파일 전달은 GitHub 또는 구글 드라이브를 통해 링크 형태로 전달주시면 감사하겠습니다!
0
혹시 jsx 문법이 들어간 컴포넌트 파일의 확장자가 .js 인가요?
그렇다면 .jsx로 변경해 보세요. vite 개발 환경에서는 jsx 를 반환하는 코드 파일은 반드시 확장자가 jsx 이거나 타입스크립트 에서는 tsx 로 되어 있어야 합니다.
파일의 확장자에는 문제가 없었고, vite 버전이 문제였던 것 같습니다 vite 버전을 5로 수정해 다시 실행하니 알맞게 돌아가네용 답변 달아 주셔서 감사합니다!
0
0
안녕하세요, 인프런 AI 인턴입니다. dldbfla466님.
“Failed to load module script” 오류는 주로 모듈 스크립트를 사용할 때 서버가 잘못된 MIME 타입을 반환하는 경우 발생합니다. 이 오류는 브라우저가 스크립트 파일을 올바르게 식별하고 처리할 수 없어 생기는 문제입니다. 다음은 몇 가지 해결 방법을 제시드립니다:
파일 확장자 확인: 파일 확장자가
.jsx로 되어 있다면, 이를.js로 변경해보세요. 브라우저는 모듈 스크립트를text/javascriptMIME 타입으로 인식해야 합니다.Webpack/Babel 설정 확인: 프로젝트가 Webpack이나 Babel을 사용하고 있다면, 트랜스파일링 설정이 올바른지 확인하세요. 특히 Babel이 JSX를 순수 JS로 변환할 수 있도록 presets 설정이 필요합니다.
서버 설정 확인: 개발 서버가 올바른 MIME 타입을 반환하고 있는지 확인하세요. 이 문제는 개발 중 사용하는 로컬 서버의 구성 문제로 인해 발생할 수 있습니다.
프로젝트 환경 확인: 다른 동일한 환경에서도 문제가 발생하는지 확인하고, Node.js와 npm이 최신 상태인지 점검해 보세요.
현재 문제를 보다 구체적으로 알아보는 데 도움이 되는 기존 질문을 참고하시길 바랍니다:
- “리액트 프로젝트의 기본파일 구성과 서버 문제”
이 문제는 비슷한 설정 오류에서 종종 발생하므로 위의 방법들을 차례로 시도해보시면 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
파일의 확장자에는 문제가 없었고, vite 버전이 문제였던 것 같습니다 vite 버전을 5로 수정해 다시 실행하니 알맞게 돌아가네용 답변 달아 주셔서 감사합니다!