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

[caraffa]

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

[byrnedo]

Also experiencing this.

[Vad1mo]

I also do see the error Cannot find module 'vue-awesome/components/Icon' in my TS Vue project.
@caraffa @byrnedo where you able to find a solution?

[Justineo]

I'm not familiar with TypeScript but according to their docs, you may try to specify something like:

"files": {
  "node_modules/vue-awesome"
}

[Vad1mo]

Unfortunately it doesn't work. I also tried the includes section.
I tried:

"node_modules/vue-awesome"
"node_modules/vue-awesome/components/Icon.vue"
"node_modules/vue-awesome/dist/vue-awesome.js" //resulted in "Maximum call stack size exceeded
 error"

The "files" property takes a list of relative or absolute file paths. The "include" and "exclude" properties take a list of glob-like file patterns. The supported glob wildcards are:

• matches zero or more characters (excluding directory separators)
  ? matches any one character (excluding directory separators)
  **/ recursively matches any subdirectory

The strange thing is that with the local dev server it is working despite the displayed error. However If I want to build the dist it fails without producing the result.

[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.

[paolobarbolini]

Also getting this problem and I couldn't find a seamless solution to it.

I had to import the Icon component using import { Icon } from 'vue-awesome'; which made the bundle size increase by 1MB since I'm importing every icon available.

[Justineo]

@paolobarbolini See @Vad1mo's comment above.

[YannikSc]

Well. This is at least something, but you have no fun with the component, if you have no Icons for it.

I'm currently failing when I try to import icon with an import 'vue-awesome/icons/plus'; (for example).
Nuxt is throwing a Cannot use import statement outside a module at me. Is it different in "normal" Vue? Or is there somehow a documentation where I can read more about the usage in combination with Nuxt?

[Justineo]

@YannikSc So are you importing the icon in an ES module or CommonJS module?

[YannikSc]

It seems like neither of them.. I created a Nuxt plugin (Icons.ts) where I tried the import 'vue-awesome/icons/plus.js'; and it seems to me like Nuxt/TS is just importing the content of the js file into its code which then tries to do the import in the browser.

But maybe this is a topic for a separate issue?

[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.