• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

3-3 웹팹 로더 사용하기

22.08.15 15:47 작성 조회수 892

1

asset app.js 325 KiB [compared for emit] (name: app)
runtime modules 1.13 KiB 5 modules
cacheable modules 303 KiB
  ./main.js 138 bytes [built] [code generated]
  ./NumberBaseball.vue 39 bytes [built] [code generated] [1 error]
  ./node_modules/vue/dist/vue.runtime.esm.js 303 KiB [built] [code generated]

ERROR in ./NumberBaseball.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (C:\Users\samsung\OneDrive\바탕 화면\CODE\vue-webgame\3.숫자야구\node_modules\vue-loader\dist\index.js:70:34)
 @ ./main.js 2:0-50 4:8-22

webpack 5.74.0 compiled with 1 error in 506 ms

 

 

 

 

--------------------------------------------NumberBaseball.vue 코드

//Vue 컴포넌트
<template>
<div>
<h1>{{ result }}</h1>
<form v-on:submit="onSubmitForm">
<input type="text" ref="answer" maxlength="4" v-model="value">
<button>입력</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
result: '',
};
},
methods: {
onSubmitForm(e) {
e.preventDefault();
},
},
};
</script>
<style>

</style>



웹팹 로더에 실패해서.. 다음 단계로 못 넘어가고 있습니다.
혹시 버전의 차이가 있을까 구글링 열심히 해봤지만 결국 에러 한 개는 해결하지 못했어요.

답변 3

·

답변을 작성해보세요.

3

확인해본 결과 vue@2는 vue-loader@15를 쓰셔야 합니다. 17버전을 쓰신 것 같습니다.

0

https://github.com/ZeroCho/vue-webgame/blob/master/3.%EC%88%AB%EC%9E%90%EC%95%BC%EA%B5%AC/package.json

강좌가 좀 오래된 강좌라서 이것과 버전이 같지 않으면 에러가 날 수 있습니다.

0

이세희님의 프로필

이세희

질문자

2022.08.15

실행해서 개발자도구에서 뜬은 오류입니다

 

Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (:63342/vue-webgame/3.%EC%88%AB%EC%9E%90%EC%95%BC%EA%B5%AC/C:\Users\samsung\OneDrive\바탕 화면\CODE\vue-webgame\3.숫자야구\node_modules\vue-loader\dist\index.js:70:34)
    at eval (NumberBaseball.vue:1:7)
    at ./NumberBaseball.vue (app.js:29:1)
    at __webpack_require__ (app.js:64:41)
    at eval (main.js:3:77)
    at ./main.js (app.js:19:1)
    at __webpack_require__ (app.js:64:41)
    at app.js:128:37
    at app.js:130:12
vue.runtime.esm.js:8759 You are running Vue in developmen