'"Cannot resolve directory '@'" in WebStorm for a Vue file

I'm using WebStorm 2021.2.4, and when I create a Vue.js 3 app I have this error:

It looks like the IDE cannot identify @ as the root directory src. How can I solve this?

vue.js webstorm

Solution 1:^[1]

Vite, as well as vite aliases, is not yet supported. Please feel free to vote for WEB-53634 and linked tickets. Actually we can hardly afford supporting all possible ways to define path mappings coming from different bundlers, frameworks and plugins. In the future we'd likely provide some unified way to deal with them in the IDE. For now, I can only suggest creating a dummy config.js file with all aliases specified explicitly like

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "src/"] ,
      ...
    },
  },
};

and then set the webpack configuration to Manual in Settings | Languages & Frameworks | JavaScript | Webpack and specify a full path to this dummy config there

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	lena

'"Cannot resolve directory '@'" in WebStorm for a Vue file

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]