[webpack 에러] TypeError: this.getOptions is not a function 에러

 

Error Message

ERROR in ./src/main.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/ingychoi/Study/lecture-frontend-dev-env/node_modules/style-loader/dist/index.js:19:24)
 @ ./src/app.js 2:0-20

 

 

📌 문제 상황

webpack에서 loader 설정 시  TypeError: this.getOptions 에러 발생

 

아래는 webpack config 파일이고 

css-loader , style-loader, file-loader를 직접 설정중이었다.

 

webpack.config.js 

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /].(jpg|png)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
          publicPath: "./dist",
        },
      },
    ],
  },
};

 

 

 

📌 해결 방법

참고 링크를 확인해보니

 

"You need webpack v5 to use the latest version of style-loader, please read changelog"

최신 버전의 style-loader 사용 시 webpack5 버전을 사용해야 한다.

 

 

실제 버전을 보니 webpack이 틸트 4버전으로 설정되어있다.

"devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "build": "webpack --progress"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jeonghwan-kim/lecture-frontend-dev-env.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env/issues"
  },
  "homepage": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env#readme",
  "dependencies": {
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "style-loader": "^3.3.1"
  }
}

 

두가지 방법이 있다.

 

1. style-loader, css-loader의 버전을 webpack에 맞게 다운그레이드 시키기

npm install css-loader@3 file-loader@5 style-loader@1

 

2. webpack을 5버전으로 설치하기

npm i webpack@5

 

 

 

🥳 나는 2번을 선택하여 해결 완료!

 

 

 

📌 참고 링크

🔗 https://github.com/webpack-contrib/style-loader/issues/517

TypeError: this.getOptions is not a function · Issue #517 · webpack-contrib/style-loader