Importing from webpack aliases does not work automatically
I have a javascript/typescript project with webpack. I'm using webpack aliases like this:
resolve: {
alias: {
"@config": path.join(ROOT_DIR, "/config"),
"@hooks": path.join(ROOT_DIR, "/src/hooks"),
"@icons": path.join(ROOT_DIR, "/src/assets/icons"),
"@logos": path.join(ROOT_DIR, "/src/assets/logos"),
"@images": path.join(ROOT_DIR, "/src/assets/images"),
"@components": path.join(ROOT_DIR, "/src/components"),
"@providers": path.join(ROOT_DIR, "/src/providers"),
"@redux": path.join(ROOT_DIR, "/src/redux"),
"@actions": path.join(ROOT_DIR, "/src/redux/actions"),
"@reducers": path.join(ROOT_DIR, "/src/redux/reducers"),
"@dispatchers": path.join(ROOT_DIR, "/src/redux/dispatchers"),
"@selectors": path.join(ROOT_DIR, "/src/redux/selectors"),
"@routes": path.join(ROOT_DIR, "/src/routes"),
"@styles": path.join(ROOT_DIR, "/src/styles"),
"@sizes": path.join(ROOT_DIR, "/src/styles/sizes"),
"@theme": path.join(ROOT_DIR, "/src/styles/theme"),
"@types": path.join(ROOT_DIR, "/src/types"),
"@utils": path.join(ROOT_DIR, "/src/utils"),
"@hoc": path.join(ROOT_DIR, "/src/hoc"),
"@views": path.join(ROOT_DIR, "/src/views"),
},
Webstorm recognizes them, since when I add an import, it does not show an error, and command + clicking on the imports take me to the file.
However, when I'm trying to use one function from this files, and the file is not yet imported, the autocomplete shows me the function, but selecting it won't add the import to the file.
As you can see on the image, numberUtils, which is inside of @utils, appears there, however selecting it, won't import it automatically. Is there something I can do?
Please sign in to leave a comment.
The issue doesn't look related to webpack aliases, it looks like a problem with auto import.
Once you choose this function from completion, can you use
Alt+Enterto import the module? What is a result of choosing Show Context Actions from the function right-click menu?Pressing Alt+Enter, shows me the option to import it:
And clicking on `Add import` works fine. Is there a way to make this happen automatically?
If I don't add the import, it does not jump anywhere:
here it is, as simple as I could make it: https://github.com/pfeldman/webstorm-test
under `src` you'll find the utils folder, where numberUtils lives.
Try to import it on the App.js under `src` (Or any other file)
I have posted the link above but appears as pending approval
Thank you for your help in providing all the details. We managed to reproduce the problem and have created a new ticket: https://youtrack.jetbrains.com/issue/WEB-64464/Path-aliases-with-wildcards-in-name-break-module-resolution. Please vote for it to get notified on any progress.