Upgrading to version 3.0.2 produces errors while running the project

[AndrewBogdanovTSS]

I've been working with v. 2.1.5 but recently decided to upgrade to v. 3.0.2. After I did I started recieving compilation erros when running my project in dev mode:

ERROR in C:\Projects\Wonder\frontend-nuxt\plugins\svg-icons\index.ts(4,9)
      TS2345: Argument of type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
  Type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' is not assignable to type 'PluginFunction<any>'.
    Type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' provides no match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'.

icons themselves are generated successfully using this command:

vsvg -s ./assets/svg -t ./assets/icons --ext ts --es6

[Allenice]

Please show me your tsconfig, svg-icons/index.ts and the code how your register vue-svgicon plugin. Or, try use this code to register plugin

Vue.use(SvgIcon.install, {})

[AndrewBogdanovTSS]

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}

svg-icons/index.ts

import Vue from 'vue'
import * as svgicon from 'vue-svgicon'

Vue.use(svgicon, {
  tagName: 'icon'
})

According to your suggestion I've changed it to

import Vue from 'vue'
import SvgIcon from 'vue-svgicon'

Vue.use(SvgIcon.install, {
  tagName: 'icon'
})

But while the compilation error has gone I don't get a proper icon component compilation:

[Vue warn]: Unknown custom element: <icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Default1> at pages\index.vue
       <Nuxt>
         <Default1> at layouts\default.vue
           <Root>

[Allenice]

change import * as svgicon from 'vue-svgicon' to import SvgIcon from 'vue-svgicon'

[AndrewBogdanovTSS]

@Allenice did you read my post? I've already did that but still I'm getting

[Vue warn]: Unknown custom element: <icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Default1> at pages\index.vue
       <Nuxt>
         <Default1> at layouts\default.vue
           <Root>

[Allenice]

Sorry, I miss some code you post. I don't know why this problem happened. Are you use nuxt.js ? I don't have nuxt.js develop experience，may be you should check your code is run correctly. I use vue-svgicon 3.x in my project, I don't have this problem.

[AndrewBogdanovTSS]

@Allenice it seems to me that this problem is not related to Nuxt.js but rather to the fact that I'm using TypeScript in my project. Do you use TS in your setup?

[Allenice]

@AndrewBogdanovTSS Yes, I use TS in my project.

[AndrewBogdanovTSS]

@Allenice could you provide an example of setup code you use in your project?

[Allenice]

@AndrewBogdanovTSS I use vue-cli 3.0 to create my project, It works find, but in my old project, it seems to have a problem. For old project, my solution is ：

import * as SvgIcon from 'vue-svgicon'

// @ts-ignore
Vue.use(SvgIcon, {
    tagName: 'icon'
})

I fell sorry for that, I guess is the version of vue is not compatible.

[AndrewBogdanovTSS]

@Allenice what do you mean when you are saying

I guess is the version of vue is not compatible.

? Nuxt.js uses latest version of Vue and the error in console clearly states that error is produced by TS not Vue related code. The code you provide above is only differs by using ts-ignore comment which to me fills more like throving the problem under the carpet rather than fixing it. If 3.0.2 version isn't compatible with TS - it's a bug that should be fixed, TS users can't afford patching the code with thousands of ignore comments all over the place. What's the reason to use TS afterall ?

[Allenice]

Yes, It is a bug. I guess is the version of vue is not compatible. I mean if the vue's version is not compatible with vue-svgicon dependence, it will alway get lint error. The purpose of the 3.x version is to make it available to typescript users. But it is counterproductive. I created this project using vue-cli 3.0, the build version is commonjs, and my declaration file seems to have a problem. If you are familiar with typescript, please help me to improve it. Thanks

[shawn-tangsc]

我碰到了类似的问题，在跑vue-cli 3.0 的的test:unit 时，报了

Unknown custom element: <svg-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option .