2

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

enter image description here

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

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Romulus Urakagi Ts'ai
  • 3,699
  • 10
  • 42
  • 68

2 Answers2

5

To fix "Cannot resolve directory '@'" in PHPStorm 11 for Vue 3.2, Vite 2.9, Laravel 9 & TS

Please check if in root folder of your project a tsconfig.json file exists. If not, create it and add the following code:

{
    "compilerOptions": {
        "baseUrl": "./resources",
        "paths": {
            "@/*": ["js/*"]
        }
    },
    "include": [
        "env.d.ts",
        "resources/js/**/*",
    ],
}

If you don't use typescript, just create jsconfig.json version.

Mavv3006
  • 65
  • 1
  • 8
ProgZi
  • 1,028
  • 3
  • 14
  • 25
  • In my legacy project, It's using "@router/layouts/main". So, in `compilerOptions.paths` if I use `"@*"` it works perfectly fine. – ssi-anik May 19 '23 at 21:19
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

lena
  • 90,154
  • 11
  • 145
  • 150
  • I cannot get the workaround working whatever I try. I also don't find any useful hints in the `idea.log`. Oddly enough, `import ... from "@/..." or `"@/..."` in ` – Zulan Apr 10 '22 at 17:54