[Webpack] 첫 빌드하면서 만난 오류 기록

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
                ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration misses the property 'entry'.
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   -> The entry point(s) of the compilation....

신나게 webpack.dev.conf.js 파일을 분석하고 리팩토링해서 빌드했는데 'entry' 속성이 빠졌다는 에러를 만났다.

근데 이상하다.. 스크립트에는 entry 속성을 분명 정의했는데 🤔

하고 스크립트를 다시 천천히 훑어보니 export 가 빠져있었다 ㅋㅋㅋ 내 파일을 제대로 못불러왔던 이슈

그도 그럴것이 webpack.dev.conf.js 파일을 로그 찍어보면 Promise { <pending> } 이렇게 나왔었다. 😅

설정파일을 로그 찍었을 때 이렇게 나오면 이상한겁니다..

const devWebpackConfig = merge(base, { // base 는 환경별 common 설정파일
  mode: 'development',
  ....
}
module.exports = devWebpackConfig;

마지막 줄 추가로 해결 완료 :)

---

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
                ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:

웹팩 오류는 너무 친절하다. 내 mode 속성 값이 이상하다고 다시 확인해달라고 한다.

mode 를 'development' 로 지정한게 왜 ㅠㅠㅠㅠ??? 했었는데

찾아보니 mode 옵션은 webpack4 이상부터 지원하는 옵션이고, 나는 webpack3 버전을 사용하고 있었다. 😅 

공홈에서 제공하는 가이드 문서도 webpack4 부터던데.. 조만간 버전 업데이트 진행해야지..

const devWebpackConfig = merge(base, {
  // @hajs mode 옵션은 webpack4 이상 제공하여 주석처리합니다.
  // mode: 'development',
  ...
}

mode 옵션 제거로 해결 완료 :)

---

 hooks.emit.tap('clean-webpack-plugin', compilation => {
            ^
TypeError: Cannot read property 'emit' of undefined
    at CleanWebpackPlugin.apply (...)

네. 이것도 webpack4+ 지원이라서 발생한 오류입니다 😢 

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins: [
  // @hajs webpack4 이상부터 지원하는 플러그인입니다.
  // new CleanWebpackPlugin();
]

clean-webpack-plugin 제거로 해결 완료 :)

---

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue 파일에서 위와 같은 컴파일 오류가 발생했고, bootstrap-vue 를 사용하는 만큼 공식홈페이지에서 가이드 해준대로

<template> 태그는 <template> 태그 외 다른 태그로 한 번 감싸줘야 한다.

<!-- compile error -->
<template>
  <b-table striped hover dark
           :items="..."
           :fields="..."
  />
  <template #thead-top="data">
    <b-tr>
      <b-th>상품</b-th>
      <b-th>가격</b-th>
    </b-tr>
  </template>
</template>

<!-- compile pass -->
<template>
  <b-table striped hover dark
           :items="..."
           :fields="...">
    <template #thead-top="data">
      <b-tr>
        <b-th>상품</b-th>
        <b-th>가격</b-th>
      </b-tr>
    </template>
  </b-table>
</template>

나 같은 경우는 <b-table> 형식을 재정의한거라서 <template> 태그를 <b-table> 태그 안에 넣어주어서 해결했다 :)

---

in ./node_modules/bootstrap-vue/dist/bootstrap-vue.min.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";/*!
| * BootstrapVue Custom CSS (https://bootstrap-vue.org)

.css 파일을 못읽어서 발생하는 컴파일 오류로, loader 를 적용해주면 된다 :)

// loader 를 추가하기 전에 install 먼저 !!
$ npm install --save-dev style-loader
$ npm i -D css-loader

module: {
  rules: [
    ...
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

style-loader, css-loader 설치 후 선언으로 해결 완료 :)

---

ERROR in ./node_modules/bootstrap-vue/dist/bootstrap-vue.min.css
Module build failed: TypeError: this.getOptions is not a function
    at Object.loader (...)

ㅎㅎㅎㅎ 위에 install 한 버전 중에 style-loader@3 버전이 webpack3.x 버전과 호환되지 않아서 발생한 문제!

동일하게 sass-loader & webpack3.x 버전을 사용하시면 sass-loader 는 7.3.1 버전으로 설치하셔야 합니다 😢

// devDependencies 에 webpack3.x 버전을 지원하는 최신 style-loader install
$ npm uninstall -D style-loader
$ npm install -D style-loader@2

style-loader 를 webpack3.x 버전과 호환되는 버전으로 재설치하여 해결 완료 :)

---

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/${...filePath}/index.html'

file-loader 와 HtmlWebpackPlugin 의 충돌로 발생한 컴파일 오류(참고)

plugins: [
  ...
  // 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인 (HTML 생성의 단순화)
  //new HtmlWebpackPlugin({
    //filename: 'index.html',
    //template: config.build.index,
    //inject: true,
    //minify: process.env.NODE_ENV === 'production' ? {
      //removeComments: true,       // 주석 제거
      //collapseWhitespace: true,   // 빈칸 제거
      //removeAttributeQuotes: true // 따옴표의 중복인 경우 따옴표 생략 (HTML 은 항상 따옴표를 사용하도록 권장하긴 함..)
    //} : false
  ...
]

new HtmlWebpackPlugin 제거로 해결 완료 :)