Search code examples
typescriptvue.jswebpackvue-class-componentsvue-property-decorator

Webpack can not resolve "vue-property-decorator" (v10.X) library while it has been installed

I got the error Module not found: Error: Can't resolve './decorators/Emit' when tried to import some functionality from the library vue-property-decorator... Well, I did not ask this question if the cause was simple like forgot to install this package. The package has been installed and presents:

enter image description here

The IntelliJ IDEA does not display it on files three view somehow, but I still can view it via go to source functionality and of course, I check these file via native file system.

enter image description here

The errors are like:

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\

Usually the errors like these are occurring when forgot some settings of the TypeScript compiler like allowSyntheticDefaultImports or esModuleInterop. However these errors are the Webpack errors, not TypeScript errors. But just in case, I'll append my TypeScript config:

{
  "compilerOptions": {

    "target": "ES2020",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,

    "baseUrl": "./",
    "paths": {}
  }
}

The Webpack config is:

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 had not any problems with vue-property-decorator for the Vue 2.x. But this is my first experience with version 10.x for the Vue 3.x.

Please don't recommend me the boilerplates created via Vue-cli or Vite - here we are talking about manual setup with Webpack.

Solution

  • You have to add .js extension to your Webpack config:

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

    .js extension always has to be included in any config, because all your dependencies will be compiled to JavaScript and Webpack has to process those, too.

    I cloned your repo and after that Webpack only reported an error about missing pug package but installing it solved the issue, then the remaining errors are related to noUnusedParameters: true in your tsconfig.json.