[webpack build 오류] Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

들어가며

개발 완료한 프로젝트의 리팩토링과 QA 수정을 진행 중인데,
리액트에서 로컬 mp4 파일을 import 하니 에러가 발생하였다. 도대체 왜!

---

참고링크

Webpack 3 locates .mp4 file but video is not playable

에러 메세지
ERROR in ./src/rf/static/sample.mp4 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

AWS S3 버킷을 이용해서 불러오던 mp4 파일을 로컬로 옮기는 작업이 필요했다.
static 폴더를 생성해 mp4 파일을 넣고 import했는데 위의 에러 발생...

import VideoUrl from '../static/sample.mp4';

// ...생략
return (
    <ReviewVideo
      src={VideoUrl}
      autoPlay
      loop
      muted
      playsInline
      type="video/mp4"
    ></ReviewVideo>
  );
// ...생략

열심히 구글링을 한 결과, webpack build 문제였다! (사실 해결하고 난 뒤라 깔끔하게 쓰지만 꽤나 삽질을...^^)
동영상과 관련된 file-loader 코드가 없어 생긴 에러였다.

// webpack index.js 
{
    test: /\.(mov|mp4)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
},

webpack 설정 파일 index.js에 위 코드를 추가해주고,

// react-app-env.d.ts

declare module '*.mp4' {
  const src: string;
  export default src;
}

src 하위에 react-app.env.d.ts 파일을 생성하고 위의 코드를 추가한다.

import VideoUrl from '../static/sample.mp4';

// ...생략
return (
    <ReviewVideo
      src={VideoUrl}
      type="video/mp4"
      autoPlay
      loop
      muted
      playsInline
    ></ReviewVideo>
  );
// ...생략

react 컴포넌트에서도 src와 type 지정 부분을 source 태그로 분리시켜줬다. (사실 이유는 잘 모르겠네 찾아봐야겠다)
onError로 처리할 때, 이 부분 때문에 변경된 영상이 제대로 출력되지 않았다. (부들부들)

어쨌든! 이렇게 설정해주고 해결하였다. 후하하 편-안.

 

---

마치며

꽤나 삽질을 했는데... 진짜 스택오버플로우 글만 10개는 봤다(?)
webpack 설정을 회사에서 사용하던 코드 그대로 복붙하는 형태로 사용하다보니 잘 몰랐던게 문제였다.
이번 기회에 이런 것이었구나 알게 되어 좋은 경험이 되었다~!