Auto-imports from LWC uses the relative directory instead of 'c/componentName'

[Darrion]

Steps to reproduce:

1. Create a primary LWC
2. Create a service LWC, and export anything, such as a function
3. In the primary LWC, create a method, and inside, start typing the name of the function that you exported from the service LWC.
4. When the suggestion box appears, hit Enter on the option that shows the correct function name / component name.
5. An import statement is generated at the top of the file.

Expected behaviour:

import {exportedFunction} from 'c/serviceLwc';

Actual behaviour:

import {exportedFunction} from '../serviceLwc/serviceLwc';

‌

Please can this be added/fixed - it would greatly improve the experience, especially in complex components with multiple imports

[Scott Wells]

Hi. Try using the importcomponent live template:

https://www.illuminatedcloud.com/features/code-completion-and-live-templates/live-templates

I believe that should give you the behavior that you're wanting. Let me know if not.

[Scott Wells]

Resolving assuming/hoping that will take care of it, but certainly feel free to reopen if I've misunderstood the request.

[Darrion]

Hi Scott

The live templates do use the ‘c/component’ syntax, but to achieve this you need to pre-emptively know the export and module name, scroll to the top of the page and write it in, thus making you scroll away from what you are currently working on, and potentially having to do a project wide search to find the names of the module/export.

However at the moment, for example, even if you are at the bottom of a JS file, if you start typing @api the suggestion box appears, and upon clicking/hitting enter, IC / Webstorm automatically adds the import {api} from 'lwc' line, without having scroll to the top and write the import in.

What I am requesting, is to hook into the standard webstorm javascript auto imports, and make it use the ‘c/component’ syntax, so that we can alleviate the need to constantly be navigating to the top of the js file and/or having to do a project wide search to find the names of the module/export. Whilst this sounds like a normal thing to do, it becomes quite cumbersome in large projects, which is why Webstorm introduced auto imports in the first place.

I think devs tend to remember function names rather than module names, especially in large projects, so even if we use a live template, we would end up having to first do a project wide search to find the module containing the function, at which point the live template didnt really help us, because the search showed us the module name and function name, and we could just write the full import statement in ourselves anyway.

Is this request something that is possible? Let me know your thoughts

‌

[Scott Wells]

Ah, I missed the key "auto" part of your original issue summary. I'll have to look at what provisions are available for extending auto-import in JavaScript, but assuming there are reasonable extension points it should be possible.

[Scott Wells]

So curiously I'm seeing this working exactly as desired. I have a service component defined as follows:

class ServiceComponent {

}

/**
 * @param date {Date}
 * @param weeks {string}
 * @return {Date}
 */
function addWeeks(date, weeks) {
}

export { ServiceComponent, addWeeks }

export function serviceComponentMethod() {}

That ensures that things are exported in both styles.

In a method of another component, I start typing addW and it shows addWeeks(Date, string) as an auto-completion offering:

and once I've accepted the auto-completion, it adds the following import statement:

import {addWeeks} from "c/serviceComponent";

Then I do the same thing with serviceC:

and the import statement is updated to:

import {addWeeks, serviceComponentMethod} from "c/serviceComponent";

Am I not doing the same thing that you're doing?

[Scott Wells]

Moreover, if I remove that import statement, these are the code intentions that are displayed on the unresolvable functions:

[Darrion]

Hi Scott, that is really weird. Is there some JS setting that maybe controls this? I’ve tested various things in the last few days and none have resulted in this functionality.

[Darrion]

Please could you post a picture of your settings:

Editor > Code Style > Javascript > Imports

‌

[Scott Wells]

Almost exactly the same except for Sort imports by modules which I wouldn't think would matter:

I wonder if it could be project config. Can you create a VERY simple project where this doesn't work and share it so I can try it in the exact same context (aside from potentially other IDE config) where it doesn't work for you?

[Darrion]

Hi - havent got round to doing this, but will do soon.