Webpack 安装后无法解析“vue-property-decorator”（v10.X）库

Question

我在尝试从库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;

A 对于Vue 2.x 的vue-property-decorator 没有任何问题。但这是我对Vue 3.x 版本10.x 的第一次体验。

请不要向我推荐通过 Vue-cli 或 Vite 创建的样板文件 - 我们在这里讨论的是使用 Webpack 手动设置。

Answer 1

您必须将 .js 扩展名添加到您的 Webpack 配置中：

resolve: {
  extensions: [".js", ".ts"]
},

.js 扩展始终必须包含在任何配置中，因为您的所有依赖项都将编译为 JavaScript，而 Webpack 也必须处理这些。

我克隆了你的repo，之后Webpack只报告了一个关于缺少pug包的错误，但安装它解决了这个问题，然后剩下的错误与你的tsconfig.json中的noUnusedParameters: true有关。