webpack ts-loader 错误: loaderContext.getOptions 不是一个函数。

Question

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

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文件:

module.exports = {
    entry: path.resolve(__dirname, './src/main.ts'),
    module: {
        rules: [ 
        {
            test: /\.ts$/,
            include: [source_path],
            loader: 'ts-loader',
            exclude: /node_modules/, 
        }],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'avi_ui.js',
        path: path.resolve(__dirname, 'dist')
    },
    externals: {
        'jquery': '`jquery`',
        'angular' : '`angular`'
    },
    mode: 'development'
};

注意：我尝试将我的typescript编译器更新到最新版本（目前最新版本为4.3.3），但对我来说无效。

- Ali Bigdeli

Answer 1

除了升级你的webpack到webpack 5，如Ali Bigdeli's的回答所指出的那样，还有另一种解决问题的方法。您也可以将ts-loader降级为8.2.0版本。使用您选择的软件包管理器，可能看起来像：

npm install ts-loader@~8.2.0

如 Ali Bigdeli 链接的 Github 问题所指出的，支持 webpack 4 的最后一个版本的 ts-loader 是 8.2.0 版本，如果你想要接收到这个版本的补丁更新，可以依赖于 ~8.2.0 版本的语义版本控制。

- MikeMike

---

我想说的是，降级 ts-loader 比升级 webpack 更容易。 - Katzura

谢谢！这正是我需要的魔法版本号！我一直在查看peerDependencies，它说webpack*一直到9.2.1。在我的情况下，升级到webpack 5会大大增加我的工作范围，因为它会影响其他东西，比如react-scripts和jest，我更愿意稍后升级它们。 - Ken Lyon

非常感谢 @MikeMike，这帮助我节省了很多时间。版本8.3.0也可以解决这个问题。 - Nicolas Lagarde

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

- Ali Bigdeli

---

我也遇到了Webpack 5的问题。我已经安装了ts-loader 9.2.6和webpack 5.69.1。 - darKnight

如果你正在命令行中使用webpack，那么运行webpack --version来确认你正在使用的版本是v5+。我在我的项目中安装了v5，但是全局安装了v4，因此意外地使用了错误的版本来运行构建。 - Sly_cardinal

cypress/webpack-preprocessor使用webpack 4，如果使用webpack 5会出现错误。 - Baksha2008