Webpack : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 오류

문제 : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: document is not defined

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: document is not defined

이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 webpack의 빌드과정에서 loader의 충돌이 발생해서 생기는 문제입니다. 저는 최적화를 위해 넣어둔 mini-css-extract-plugin과 style-loader의 충돌로 발생하였습니다. 해결방안으로는 아래와 같습니다.

 

해결방법 : 

//before
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  
  //after
    module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },

위와 같이 충돌이 발생한 loader인 style-loader를 제거해주었습니다. 간혹 빌드 셋팅할때 이런 충돌이 발생할 수 있으니 개발환경과 운영환경 분기시에 신경써서 분기해야될 것 같습니다.