Error: Cannot find moudle "vue-awesome/components/Icon" in TypeScript template

Hi, firstly thank you very much for your great work. I’m new to the Vue world, so I’m not sure if it’s a real issue or I’m missing something trivial. I aplogize in advance. I’ve set the traspileDependency in vue.config.js as per READ.ME ( I’m using vue-cli 3)

// vue.config.js
module.exports = {
  transpileDependencies: [
    /\bvue-awesome\b/
  ]
}

and I’m able to correctly import and use the icons in components where the script language is plain ES6 javascript, but when I try to import the component in a TypeScript block (like this

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Icon from "vue-awesome/components/Icon";

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

) the build fails with the error mentioned in the title. I suspect it depends on the tsconfig.json file which somehow overrides the traspileDependency option in vue.config.js (

// tsconfig.json
{
  "compilerOptions": {
    .
    .
    .
    },
    "lib": [
    .
    .
    .
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules" // <<<---------
  ]
}

)

How can I address this issue?

Thank you very much

[Vad1mo]

this is kind of strange, I swapped from import Icon from "vue-awesome/components/Icon"; to import Icon from "vue-awesome/components/Icon.vue"; in my main.ts file and it didn’t produce the error anymore…

No need to change tsconfig.json.

So this postfix is the only tiny thing needed for the plugin to work with TS.

[edwh]

I had same issue. I’m trying to move the import out of a Nuxt plugin into an individual Vue component to reduce bundle sizes for icons which are rarely used.

This looks promising to me:

if (process.client) {
  import('vue-awesome/icons/globe-europe')
}

i.e. don’t try to do this inside the SSR.

But I think that only works if you do the import inside the page, rather than any components below it. This makes it awkward, because there’s no easy way to keep track of all the icons which are used in the component tree below the page.

I’ve not found a way (yet) of importing into a component file. Or playing the async import trick.