안녕하세요.
webpack.config.js 파일을 익히던 중 에러를 마주한 내용을 기재하려고 합니다.
문제는 npm run build를 실행했을 때 확인된 내용이고, 설정에는 이상이 없었습니다.
그렇지만 npm 설치를 여러가지 한 상황에 의존성 모두 failed를 뿜어내는 log는 마주하는 순간 오늘 잠 못자려나 싶었습니다.
관련된 error 내용은 불필요하다 싶은 부분은 다 지웠고 templateLoader, vue loader 이러한 애들이 작업할 때 오류가 난다는 것인데 막막했던 부분입니다.
● 에러 내용입니다.
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): /
ERROR in ./Baseball.vue?vue&type=template&id=0d683404& (./node_modules/vue-loader/lib/loader
s/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./
Baseball.vue?vue&type=template&id=0d683404&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
SyntaxError: Unexpected token (1:271)
at Parser.pp$4.raise (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-es20
15-compiler\buble.js:2757:13)
at Parser.pp.unexpected (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:647:8)
at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\wivps\Desktop\vue\baseball\n
ode_modules\vue-template-es2015-compiler\buble.js:2252:49)
at Parser.pp$3.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2163:41)
at Parser. (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-es2
015-compiler\buble.js:6003:24)
at Parser.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:6129:31)
at Parser.pp$3.parseExprSubscripts (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue
-template-es2015-compiler\buble.js:2047:19)
at Parser.pp$3.parseMaybeUnary (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-tem
plate-es2015-compiler\buble.js:2024:17)
at Parser.pp$3.parseExprOps (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templa
te-es2015-compiler\buble.js:1966:19)
at Parser.pp$3.parseMaybeConditional (C:\Users\wivps\Desktop\vue\baseball\node_modules\v
ue-template-es2015-compiler\buble.js:1949:19)
at Parser.pp$3.parseMaybeAssign (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-te
mplate-es2015-compiler\buble.js:1925:19)
at Parser.pp$3.parsePropertyValue (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-
template-es2015-compiler\buble.js:2443:87)
at Parser.pp$3.parseProperty (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2434:8)
at Parser.pp$3.parseObj (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:2380:23)
at Parser.pp$3.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2179:17)
at Parser. (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-es2
015-compiler\buble.js:6003:24)
at Parser.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:6129:31)
at Parser.pp$3.parseExprSubscripts (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue
-template-es2015-compiler\buble.js:2047:19)
at Parser.pp$3.parseMaybeUnary (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-tem
plate-es2015-compiler\buble.js:2024:17)
at Parser.pp$3.parseExprOps (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templa
te-es2015-compiler\buble.js:1966:19)
at Parser.pp$3.parseMaybeConditional (C:\Users\wivps\Desktop\vue\baseball\node_modules\v
ue-template-es2015-compiler\buble.js:1949:19)
at Parser.pp$3.parseMaybeAssign (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-te
mplate-es2015-compiler\buble.js:1925:19)
at Parser.pp$3.parsePropertyValue (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-
template-es2015-compiler\buble.js:2443:87)
at Parser.pp$3.parseProperty (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2434:8)
at Parser.pp$3.parseObj (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:2380:23)
at Parser.pp$3.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2179:17)
at Parser. (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-es2
015-compiler\buble.js:6003:24)
at Parser.parseExprAtom (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-template-e
s2015-compiler\buble.js:6129:31)
at Parser.pp$3.parseExprSubscripts (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue
-template-es2015-compiler\buble.js:2047:19)
at Parser.pp$3.parseMaybeUnary (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-tem
plate-es2015-compiler\buble.js:2024:17)
at Parser.pp$3.parseExprOps (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templa
te-es2015-compiler\buble.js:1966:19)
at Parser.pp$3.parseMaybeConditional (C:\Users\wivps\Desktop\vue\baseball\node_modules\v
ue-template-es2015-compiler\buble.js:1949:19)
at Parser.pp$3.parseMaybeAssign (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-te
mplate-es2015-compiler\buble.js:1925:19)
at Parser.pp$3.parseExprList (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-templ
ate-es2015-compiler\buble.js:2663:20)
at Parser.pp$3.parseSubscripts (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue-tem
plate-es2015-compiler\buble.js:2075:29)
at Parser.pp$3.parseExprSubscripts (C:\Users\wivps\Desktop\vue\baseball\node_modules\vue
-template-es2015-compiler\buble.js:2050:21)
@ ./Baseball.vue?vue&type=template&id=0d683404& 1:0-198 1:0-198
@ ./Baseball.vue
@ ./main.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! baseball@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the baseball@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output
above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\wivps\AppData\Roaming\npm-cache\_logs\2019-12-07T15_40_12_580Z-debug.l
og
문제와 해결
parser에서 오류가 나는 것과 templateLoader, 그리고 너무 긴 에러코드로 config의 문제는 아닐 것 같았습니다. (이미 여러차례 확인도 했습니다.)
오타도 없고, html 만들 때 문제가 있을 것 같지도 않았던 무지가 오히려 더 헤매는 결과가 되었습니다.
IDE 창에서 문제의 html 화면인데, 이런 위치 때문에 더 시간이 걸렸던 것 같습니다.
문제의 코드
<template>
<div>
<h1>{{result}}</h1>
<form v-on:submit="onSubmitForm">
<input type="text" ref="answer" maxlength="4" v-model=""value>
<button>입력</button>
</form>
<div>시도 : {{}}</div>
</div>
</template>
보시면 바로 보이겠지만, value가 밖에 있습니다. 저 변수 하나로 저런 에러가 났었네요.
config의 문제일 경우 webpack이 해당 문제를 명확히 알려주지만 html 내부에서의 구문 오류는 더 많은 에러를 뿜는 경우가 있다는 경험을 하게 되었습니다.
감사합니다.