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

문제 내용: 프로젝트 루트에 있는 엑셀 파일 import가 적용되지 않음 & 엑셀 파일 인식이 제대로 되지 않음

해결 방법: webpack config 에 설정 추가 & 프로젝트 로컬 경로를 입력하여 파일 direct import

---

ExcelRulesUpload.tsx 의 코드는 어땠을까?

function logic

const downloadExcelTemplate = e => {

    const link = document.createElement('a')
    const fileName = 'excel_template_example.xlsx'
    link.href = fileName
    document.body.appendChild(link)
    link.target = '_self'
    link.download = fileName
    link.click()
    document.body.removeChild(link)
  }

HTML(button)

<button
    type="button"
    className="btn-control"
    onClick={e => downloadExcelTemplate(e)}
>
	엑셀 템플릿 다운로드
</button>

기본적인 a 태그로 구현이 충분할 것이라 생각해서, event를 기준으로 한 function 을 만들어서 실행해보았다.

 

엑셀 파일이 없어서 실패...?

음..? 파일이 없는데요 선생님..?

.tsx 파일이 존재하는 폴더에 같이 둔 파일인데, 아무리 파일명/ 폴더명을 바꿔도 저장은 실패하였다. (자꾸 파일이 없대... ㅠㅠ)

 

이 때부터 삽질 시작.

상대경로/ 절대경로 부터 찾기 시작하고..

오래되지 않은 글 중 a 태그, Blob, file download js, SheetJS 등등 마구잡이로 찾아서 적용해 보았었다.

 

중간에 잠시 스쳐 지나갔었던 require 코드

window.open(require('excel_template_example.xlsx'), '_none')

=> 해결 실패....

자포자기 하는 심정으로 해당 오류 내용을 긁어서 검색해 보다가,

꼭 필요로 하던 내용과 솔루션을 언급한 글을 발견했다.

---

드디어 처음 맞이한 솔루션

 

[webpack build 오류] Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file

(출처: tenny.log)

 

Tenny 님의 블로그에서 드디어! 발견한 실마리... ㅠㅠ 감격

 

바로 본론으로 들어가자면, 지금 내 프로젝트에는

• 로컬에 존재하는 .xls, .xlsx 파일에 대한 확장명 정보가 성립되지 않음 -> 파일 Routing이 불가능함
• .xls, .xlsx 에 대한 파일 활용 기능이 전무함 -> 다운로드가 이루어지지 않고 있음

위와 같은 문제로 인해 기능 구현이 안되고 있는데,

이러한 부분에 대해서는 Webpack config 에서 해결을 봐야 한다.

 

여러 파일에서 설정을 바꾸었다.

webpack.common.js

module.exports = options => ({
	...
    resolve: {
    	...
    },
    module: {
    	rules: [
        	...
           {
            test: /\.(xls?x)$/i,
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            	}
           },
       	],
    },
   ...
})

 -> .xls, .xlsx 파일에 대해서는 file-loader 를 활용하여 파일을 읽어온다. 이름.확장자 방식의 파일이 나오도록 옵션을 설정했다.

더불어, 아래와 같이 위에서 정의한 엑셀 파일 모듈에 대한 글로벌 접근이 가능하도록 추가 설정을 해준다.

 

typings.d.ts (optional)

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

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

 

다 되었다면 ExcelRulesUpload.tsx 파일로 돌아와서 내용을 바꿔준다.

 

ExcelRulesUpload.tsx

import ExcelExample from '../excel/excel_template_example.xlsx'

변경한 설정으로 인하여, 이제 엑셀 format 파일에 대한 import 가 가능해졌다.

컴포넌트를 import 하듯이 로컬 파일의 경로 및 파일명을 입력하여 import를 설정해 준다.

 

이후 위에서 설정했었던 function (downloadExcelTemplate) 은 필요가 없어졌으므로 삭제,

하단의 버튼 태그는 a 태그로 변경하고 import 했던 파일을 바로 연결해 준다.

<a href={ExcelExample}
	className="btn-control"
	download>
	엑셀 템플릿 다운로드
</a>

이후 npm을 다시 start 해주고, 링크를 클릭하여 변경된 로직과 모듈을 테스트 해보면 된다.

 

결국 해결!

파일 아이콘에는 다운로드가 되면서 퍼렇게 깜빡이는 애니메이션이 있었다. (감격)

짜잔!

파일이 의도했던 대로 아주 자알 받아진다.

 

 

여러 라이브러리, 익스텐션 등등을 끌어와서 사용하다 보니,

각각 기술에 대한 기본적인 지식이 부족해서 별의 별 이벤트를 다 겪는 것 같다. -_-

 

가끔 이런 일이 생길 때마다 역시 문서 숙지가 중요하다는 걸 깨닫게 된다...

(물론 근본적인 원인을 늦게 알게되긴 했지만 그래도 해결되니 뿌듯!)