Typescript support?

[avxkim]

I'm using nuxt with typescript (nuxt-property-decorator), when import svg:

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '@/assets/svg/logo.svg'

@Component({
  components: {
    Logo
  }
})
class Def extends Vue {}
export default Def
</script>

I'm getting error: Cannot find module '@/assets/svg/logo.svg'.Vetur(2307)

[manniL]

No idea :|

@kevinmarrec Do you have a clue by any chance?

[kevinmarrec]

@manniL Yes I have !

@webcoderkz
You need a file in root directory or in a @types directory (in both cases TypeScript compiler will take it into account).

It needs to be a .d.ts file (example: svg-shims.d.ts)

With content :

declare module '*.svg' {
  const content: any
  export default content
}

It makes TypeScript aware of what type should resolve a SVG file, fixing errors when importing .svg in TypeScript files.

PS : I will add a note in new TypeScript docs about non-TS/JS imports

[avxkim]

@kevinmarrec thanks, i've added types/svg-shims.d.ts with contents you wrote, but typescript still complains.

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

[kevinmarrec]

@webcoderkz Could you provide a github repository directly, by any chance ? I will be able to take a look.

[avxkim]

i will upload it in 30 mins.

[avxkim]

@kevinmarrec https://gitlab.com/heihachi88/nuxt-test

[kevinmarrec]

@webcoderkz Doesn't seem to be the right one, isn't it ? I don't have errors and can't find svg imports.

[avxkim]

It's wrong code i've uploaded, lol, sorry. Anyway, i just noticed, if i declare modules as you said:

declare module '*.svg' {
  const content: any
  export default content
}

// then import it
import logo from './logo.svg'

Then it works, no errors, but if i use inline method: import logo from './logo.svg?inline', then it throws an error. Module declaration wildcard's disallow using two asterisks, like *.svg*.

[kevinmarrec]

@webcoderkz Well then only workaround/solution shoud be :

const logo = require("./logo.svg") as string

[avxkim]

You mean import logo from './logo.svg' as string?

[kevinmarrec]

@webcoderkz No cause it's not syntax valid with import (AFAIK)

[Kapcash]

@webcoderkz You have to declare the svg?inline in the declaration file as well:

declare module '*.svg?inline' {
  const content: any
  export default content
}

declare module '*.svg' {
  const content: any
  export default content
}

It works fine for me :)