webpack ts-loader 错误：loaderContext.getOptions 不是函数

Question

我正在尝试将我的打字稿文件导入到webpack，当我tsc在终端中运行时一切正常，但是当我尝试使用编译我的打字稿代码时ts-loader会显示这个奇怪的错误：

ERROR in ./src/Main.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:14:21)

webpack 版本：4.43.0、 ts-loader 版本：^9.2.3、 loader-utils 版本：^1.4.0

webpack.config.js 文件：

ERROR in ./src/Main.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:14:21)

注意：我尝试将typescript编译器更新到最新版本（当前最新版本是：4.3.3），但它对我不起作用。

Answer 1

正如 Ali Bigdeli 的回答所指出的，除了将 webpack 升级到 webpack 5 之外，还有一种方法可以解决该问题。您也可以将 ts-loader 降级到 8.2.0。使用您选择的包管理器，可能看起来像：

npm install ts-loader@~8.2.0

正如 Ali Bigdeli 链接的Github 问题中指出的 ，支持 webpack 4 的最后一个版本ts-loader是 8.2.0，如果您想接收该版本的补丁，可以依赖 semver ~8.2.0 版本。

Answer 2

根据Github问题，解决此问题的唯一方法是将其升级webpack到 v5。
我从webpack官方网站找到了这个链接。升级版本的最简单方法是使用 javascript 包管理器，例如，如果您使用npm或yarn可以使用以下终端代码：

# using npm 
$ npm install webpack@5.75.0
# using yarn
$ yarn add webpack@5.75.0

注意：此时当前版本webpack是5.75.0