已安装v10.x版vue-property-decorator但Webpack提示无法解析该库报错

我在从vue-property-decorator库导入功能时，遇到了Module not found: Error: Can't resolve './decorators/Emit'报错，可排除未安装依赖的问题，该包已成功安装：

IntelliJ IDEA的文件树视图未展示该包，但通过「go to source」功能可跳转至对应源码，本地文件系统也可正常查看相关文件：

完整报错信息 #

ERROR in ../node_modules/vue-property-decorator/lib/index.js 3:0-41
Module not found: Error: Can't resolve './decorators/Emit' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19

ERROR in ../node_modules/vue-property-decorator/lib/index.js 4:0-45
Module not found: Error: Can't resolve './decorators/Inject' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19

ERROR in ../node_modules/vue-property-decorator/lib/index.js 5:0-43
Module not found: Error: Can't resolve './decorators/Model' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19

这类报错通常是TypeScript编译器未配置allowSyntheticDefaultImports或esModuleInterop导致，但本次为Webpack报错而非TypeScript编译报错。为便于排查，附上我的TypeScript配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {}
  }
}

Webpack配置如下：

import Webpack from "webpack";
import Path from "path";
import { VueLoaderPlugin } from "vue-loader";

const webpackConfig: Webpack.Configuration = {
  context: Path.resolve(process.cwd(), "Source"),
  entry: "./index.ts",
  output: {
    filename: "index.js",
    path: Path.resolve(process.cwd(), "Distributable")
  },
  mode: "development",
  watch: true,
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [ /\.vue$/ ]
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.pug$/u,
        oneOf: [
          {
            resourceQuery: /^\?vue/u,
            use: [ "pug-plain-loader" ]
          },
          {
            use: [
              {
                loader: "html-loader",
                options: {
                  minimize: { caseSensitive: true }
                }
              },
              "pug-html-loader"
            ]
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ ".ts" ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

export default webpackConfig;

我之前在Vue 2.x环境下使用vue-property-decorator从未出现类似问题，这是我首次在Vue 3.x环境下使用该库的10.x版本。请勿推荐Vue-cli或Vite生成的模板，本次需要针对手动Webpack配置的解决方案。

根因 #

报错由Webpack依赖解析后缀配置缺失导致：你当前配置的resolve.extensions仅包含.ts后缀，而vue-property-decorator v10.x 打包后的产物均为.js格式，Webpack解析该包内部相对路径导入时不会自动补全.js后缀，因此触发模块找不到的报错。

修复步骤 #

修改Webpack配置中的resolve.extensions字段，补充.js、.vue等常用工程后缀即可：

resolve: {
  // 可根据实际使用频率调整后缀顺序，降低查找开销
  extensions: [".ts", ".js", ".vue"]
}

修改完成后重启Webpack编译服务即可恢复正常。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD