🚨 Refused to apply style from '~~~.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 🚨

Refused to apply style from '~~~.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
로컬에선 잘만 돌아가던 코드가 배포 사이트에서 에러를 뱉기 시작 . .

언젠가 다시 발생할 수도 있는 에러이기에 또 이런 에러를 만났을 미래의 나를 위한..
이런 에러와 싸우고 있을 누군가를 위한..
트러블 슈팅 Let's go 🔥

💬 혹시 깃허브 로그인이 문제 ?

우리 서비스에는 깃허브 로그인 기능이 구현되어있는데, 깃허브 보안때문에 배포 사이트에서 문제가 생기는 건가 의심을 했다.
현재 서비스 배포가 Cloudflare로 이뤄지고 있었기 때문에 정확한 문제 확인을 위해 서비스 레포를 포그 떠서 개인 레포로 가져온 뒤, 버셀로 배포를 해서 버셀 배포본으로 서비스에 접근해보았다.

그러나 여전히 같은 에러 발생 ..!!! 🤬

🧐 에러 메시지로 다시 돌아가보자

Refused to apply style from '~~~.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

메시지를 보면 어떤 파일을 못 찾고 있다고 하는데.. 이걸 자세히 보면! 번들 파일인 걸 알 수 있다

➡️ 에러 메시지에 찾을 수 없다고 나온 파일 명이 dist > asset > js, css 파일 명과 동일
➡️ js 번들 파일 하나, css 번들 파일 하나
➡️ 아..! 지금 번들 파일을 못 찾고 있는 것이구나 !! (깨달음)

💥 문제를 찾은 것만 같다 ..!

앞서 적은 것처럼 로컬에선 잘 동작하던 코드가 배포본에서만 제대로 동작하지 않는 이유에 대해 궁금했었는데, 번들러 관련 에러라면 설명이 가능했다 !

로컬에선 빌드를 하지 않기 때문에 오류가 발생하지 않았고, 배포 환경에선 빌드 후 번들링 과정을 수행하기 때문에 오류가 발생할 수 밖에 없던 것이다..!!

---

dist를 기준으로 배포를 하니까 번들 파일 경로는 dist를 root로 생각한다.
정상적인 하위 주소는 /asset/번들파일이 되고, 번들 파일 요청은 배포주소/asset/번들파일로 들어가야 정상적으로 파일을 찾을 수 있다.

👀 그렇다면 왜 특정 주소에서만 에러가 발생했을까 !?

우리의 배포 사이트 기준, 홈 화면에서는 위에서 말한 정상적인 주소(배포주소/asset/번들파일)로 접근하여 번들 파일을 잘 불러오고 있었다.

그러나 특정 주소로 넘어갔을 경우에는 'RequestURL: 배포주소 + 특정 주소/asset/번들파일'에 접근하여 번들 파일을 요청했다.

결국, 비정상적인 경로에서 번들 파일을 찾으려고 해서 에러가 발생했던 것 ..!!! 🌟🌟

🫵 이런 사단이 난 이유 !

➡️ vite.cofig.js의 base 필드를 주목하자 🌟

vite.cofig.js의 base 필드를 지정하면 상대 경로로 번들 위치를 잡게 되는데, 홈으로 접근했을 때는 서브주소가 없기 때문에 "배포주소 + /"를 루트로 보고 정상적인 번들러 위치에 접근한다.

하지만, 서브 주소로 리다이렉트 된 경우에는 "배포주소 + /서브 주소"를 루트로 보고 해당 주소를 기준으로 번들을 찾으려고 하기 때문에, 에러가 발생한 것이다.

😻 해결 방법

➡️ vite.cofig.js의 base 필드 자체를 지워버리기 !

base 필드를 지우면 무조건 루트 경로를 절대 경로로 생각하고 번들 위치를 잡기 때문에, 오류를 해결할 수 있다 !!
(루트 경로를 절대 경로로 생각하고 번들 위치를 잡게 되면, 어떠한 서브 URL에 접근하더라도 항상 동일한 위치에 번들이 있음을 보장 가능 🌟🌟)