CODEWITHSUNDEEP
typescriptvue.jswebpack
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 923

How to import VueLoaderPlugin toTypeScript file?

I use TypeScript to generate the webpack config.

According vue-loader documentation, I installed vue-loader and vue-template-compiler.

I make sure that vue-loader has types definition file:

enter image description here

However, my TypeScript project does not see plugin.js file.

TS2307: Cannot find module 'vue-loader/lib/plugin'.

enter image description here

I tried "allowJs": true: no effect.

Also, if to suppress the error message by @ts-ignore, my application will be successfully build by webpack. So the problem some missing declaration. Which are?

My tsconfig.json settings are:

{
  "compilerOptions": {

    "target": "es6",
    "strict": true,

    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,

    "lib": [
      "es2018"
    ],

    "baseUrl": "./",

    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}

Update: suggested solution try

enter image description here

TS7016: Could not find a declaration file for module 'vue-loader/lib/plugin'

The contents of node_modules/vue-loader/lib/index.d.ts is:

import { Plugin } from 'webpack'

declare namespace VueLoader {
  class VueLoaderPlugin extends Plugin {}
}

export = VueLoader

Upvotes: 1

Views: 1033

Answers (2)

AXE
AXE

Reputation: 865

did you try this way: import { VueLoaderPlugin } from "vue-loader";

this works for me.

Upvotes: 3

Cesar Manrique
Cesar Manrique

Reputation: 121

You can import the plugin into typescript like this:

import * as VueLoaderPlugin from 'vue-loader/lib/plugin';

After that you should get a bunch of errors mostly related to consolidate, a template engine consolidation library for node.js.

I tried fixing those errors using an approach similar to Consolidate - Webpack build fails #295 but could not get a working webpack configuration.

Upvotes: 0

Related Questions