Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebStorm IDE : "Cannot resolve symbol 'FontAwesomeIcon'" #177

Closed
ByScripts opened this issue Jun 5, 2019 · 2 comments
Closed

WebStorm IDE : "Cannot resolve symbol 'FontAwesomeIcon'" #177

ByScripts opened this issue Jun 5, 2019 · 2 comments

Comments

@ByScripts
Copy link

Describe the bug

When importing FontAwesomeIcon component, WebStorm underlines the import saying Cannot resolve symbol 'FontAwesomeIcon'. This causes problem for props completion.

import Vue from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
         ^^^^^^^^^^^^^^^

The app works correctly, but WebStorm is unable to show any completion for props defined by this component (icon, size, fixedWidth, ...).

I'm willing to accept that this is a WebStorm issue, but it's the only component that causes me such a problem, so...

Reproducible test case

Just import and register the component in WebStorm/PhpStorm then use it in a template.

<!-- App.vue -->

<template>
  <FontAwesomeIcon [ctrl+space here]
</tempalte>

<script>
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

  export default {
    name: "App",
    components: { FontAwesomeIcon }
  }
</script>

Expected behavior

Typing <FontAwesomeIcon should trigger props autocompletion for FontAwesomeIcon component, but only show completion for standard Vue props (v-if, v-for...) and HTML attributes.

Desktop (please complete the following information):

  • macOS 10.14.5
  • PhpStorm 2019.1.2
@btaens
Copy link
Contributor

btaens commented Aug 16, 2019

This is due to index.d.ts declaring the node namespace as a module.

declare module '@fortawesome/vue-fontawesome' {
import { FunctionalComponentOptions } from 'vue'
import { PropsDefinition } from 'vue/types/options'
interface FontAwesomeIconProps { }
interface FontAwesomeLayersProps { }
interface FontAwesomeLayersTextProps { }
export const FontAwesomeIcon: FunctionalComponentOptions<FontAwesomeIconProps, PropsDefinition<FontAwesomeIconProps>>
export const FontAwesomeLayers: FunctionalComponentOptions<FontAwesomeLayersProps, PropsDefinition<FontAwesomeLayersProps>>
export const FontAwesomeLayersText: FunctionalComponentOptions<FontAwesomeLayersTextProps, PropsDefinition<FontAwesomeLayersTextProps>>
}

If you remove the declare line (and brackets) it works perfectly.
Is there any reason it's declared like this here, but not in any of the other repos (eg. @fortawesome/free-solid-svg-icons)?

@robmadole
Copy link
Member

Should be fixed now. Please let us know if it's not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants