1

Module not found: Error: Can't resolve './decorators/Emit'尝试从库vue-property-decorator导入某些功能时出现错误...好吧，如果原因很简单，例如忘记安装此软件包，我没有问这个问题。该软件包已安装并呈现：

在此处输入图像描述

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-property-decorator。Vue 2.x但这是我第一次10.x使用Vue 3.x.

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

4

1 回答 1

2

您必须在 Webpack 配置中添加 .js 扩展名：

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

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

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

于 2021-11-19T00:56:57.977 回答