[Typescript] TypeError: loaderContext.getOptions is not a function

jsx를 tsx로 마이그레이션 하기 위해 ts-loader와 Webpack을 설정했다. (repo-url)

npx webpack

 

Webpack을 실행하자 다음과 같은 에러가 났다.

TicTacToe_TS_hochan % npx webpack
Hash: a8dde2af1ae05d91a224
Version: webpack 4.46.0
Time: 274ms
Built at: 2021. 10. 07. 오후 2:44:28
 2 assets
Entrypoint main = ./bundle.js ./bundle.js.map
[0] ./src/app.jsx 403 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/app.jsx
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/a1500612/Desktop/ts-webpack-migration/TicTacToe_TS_hochan/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/a1500612/Desktop/ts-webpack-migration/TicTacToe_TS_hochan/node_modules/ts-loader/dist/index.js:14:21)

 

해당 오류는 Webpack과 ts-loader간의 버전 차이로 발생하는 에러이다. (Github issue 참고)

webpack 4를 지원하는 ts-loader의 마지막 버전은 8.2.0v이다. 

 

나의 경우, 기존 webpack 버전이 4.41인데 ts-loader를 새로 최신 버전으로  추가하면서 문제가 발생했다.

  "devDependencies": {
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }

 

ts-loader를 다운 그레이드 할 수도 있고,

yarn add ts-loader@~8.2.0

 

webpack을 최신 버전으로 다시 받을 수도 있다.

yarn add webpack

 

나는 후자를 택했다.

 

 

mode에 대한 warning도 뜬다. webpack에 mode도 추가해주자.

 

해결!