[Vue.js] npm run build 명령어 실행 후 'Parsing error: Unexpected token <'가 뜨는 에러

 

남들은 다 쉽게하는 것만 같았던 프로젝트 배포,,

나에겐,, 아주아주 미니미한 프로젝트인데도 왜 이리 산넘어 산인지,,

시행착오 끝에 서버에 대한 이해가 점점 더 되고있는 듯 하다.

 

 

에러

Parsing error: Unexpected token <

main.js 파일의 import 부분에 빨간줄이 생길 것이다.

 

 

해결

정갈한 코드정리를 위해 eslint와 prettier를 함께 사용하고자 했는데,

.eslintrc.js를 기존에 만들어놨던 프로젝트에서 그대로 복붙해오는 과정에서 에러가 터졌다.

역시.. 그냥 복붙은 소용이 없다. 뭐든지 이해를 하고 사용해야하는 것..

그 사실을 과거에도 깨닫고 오늘도 깨닫고 내일도 깨달을 듯....😭

 

아예 새로 만들어야겠다고 생각한 후, .eslintrc.js를 삭제하고 다시 생성했다.

eslint --init

이때 이 명령어가 없다고 뜨는 경우, eslint를 설치해야한다.

 

다시 설정한 후에도 같은 에러가 떴다.

폭풍 구글링을 한 후, 2가지를 더 추가해주었고 해결되었다.

module.exports = {
    root: true,
    env: {
        "browser": true,
        "commonjs": true,
        "node": true
    },
    extends: [
    	"eslint:recommended", "plugin:vue/essential" // extends 안에 해당 해용추가
    ], 
    parserOptions: {
        "ecmaVersion": 12
    },
    parserOptions: { // parserOptions 추가
        parser: "babel-eslint"
    },
    rules: {
    }
};

 

eslint 정말 잘 활용해보고싶은데...

공부할 목록에 추가해주었다.

 

 

추가

해결방법을 찾다보니 이런 모듈도 있었다.

난 사용하지않았지만, 미래의 나를 위해 기록..

 

출처는 이 곳!

01 | CRA 초기세팅 & ERROR 🚨

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.