Webstorm does not see @ alias

Running into a similar issue with a Next.js project. See PR https://github.com/UnlyEd/next-right-now/pull/265

Adding module path aliasing works well with TypeScript (Jest, Next.js, Storybook) even though it requires to configure the paths aliases in 3 different places (a pain, unrelated to WebStorm).

But, for .js files, it doesn't work the same way. (the config being in a "tsconfig.json" file, it doesn't apply to JS)

One solution that seems to work is to create a "jsconfig.json" too, and that's the one WebStorm will use when resolving paths aliases for .js files.

```js

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/common/*": [
        "../src/common/*"
      ],
      "@/components/*": [
        "../src/common/components/*"
      ],
      "@/utils/*": [
        "../src/common/utils/*"
      ],
      "@/modules/*": [
        "../src/modules/*"
      ]
    }
  }
}

```

```

// tsconfig.json
{
  "extends": "../tsconfig.json",
  "include": [
    "./**/*.ts*"
  ],
  "exclude": [],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/common/*": [
        "../src/common/*"
      ],
      "@/components/*": [
        "../src/common/components/*"
      ],
      "@/utils/*": [
        "../src/common/utils/*"
      ],
      "@/modules/*": [
        "../src/modules/*"
      ]
    },
    "types": [
      "cypress"
    ],
    "sourceMap": false,
    "isolatedModules": true
  }
}

```

Doing this fixed the `cypress/support/commands.js` file which was doing this:

import { CYPRESS_WINDOW_NS } from '@/modules/testing/cypress';

Without the jsconfig.json, the above was not working. (WebStorm couldn't resolve the path aliases because it knew them for .ts files but not for .js files)

---

Although, I have a similar setup in ".storybook" and the same trick doesn't work there (it builds fine, but WebStorm fails to resolve the module aliases) => It was a WebStorm "syncing/caching" issue, by restarting WebStorm, it got fixed.

So, the solution is to create a jsconfig.json file, if you have .js files that use path aliases. It's necessary for WebStorm to understand the paths mapping.

Edit: See commit https://github.com/UnlyEd/next-right-now/commit/5df42876b763f2df8fc4892328dc64d916469afd for an example of WebStorm path mapping resolution

What IDE version do you use? Did you agree to run webpack when prompted?

Create a jsconfig.json in the root directory. Then paste the below content:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

WebStorm will recognize the imports.

Source:  Stackoverflow-WebStorm

Sorry if it's a bit off-topic.

I have a monorepo project with several subsystems in different technologies, including Go and Vue.js. Goland is used to develop them. IDEA project includes this entire monorepo (it's small, a pet project of mine, but since it includes several loosely connected subsystems, I'm calling it like that).

Webpack path aliases (`@/module/name`) used to work up until Goland 2020.3, but in 2021.1 they stopped working. Same with 2021.x EAP / 2021.2 Beta. So I had to stick to 2020.3 for the time being. Caches were purged, and IDEs reinstalled, .idea folders dropped, and .Goland folders too -- with no effect.

I followed advice by Ambroise Dhenain and crafted a small jsconfig.json in the root of the Vue.js project (not the root of IDEA project):

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

 Goland picked up Webpack path aliases immediately in 2021.2 Beta. 2021.1 appears to work too.

In my case (for Phpstorm) was enough to set a manual path to webpack config. 

I go to "File | Settings | Languages & Frameworks | JavaScript | Webpack" and then choose "Manually" and give the path to the webpack config and now it's works superb. 

‼️

I have added node.js interpreter and checked coding assistant for Node.js. The project is Vue 3, webpack

AND IT WORKS, RESOLVED IMMEDIATELY 

Try prefixing path with ~:

@import '~@design'

This doesn't work for me either. It works for my ts/tsx files with tsconfig.json though.

Also I can't include the beginning "@" somehow.

Path mappings defined in tsconfig.json only work in TypeScript, they are not taken into account when resolving paths in .js files. You should use webpack aliases there, or try defining your mappings in jsconfig.json instead (@since 2020.1)

Thank you, I'm glad it helped!

I also wrote an article to explain a bit more the overall configuration and caveats.

https://dev.to/vadorequest/migrating-next-js-jest-storybook-cypress-to-use-module-path-aliases-instead-of-relative-paths-d9a

For the sake of being thorough, I replaced all my `process.env` parts with their static values. It seems to work after that. Not sure why an empty object would fail.

When I include `require('dotenv').config()` the IDE recognizes the environment afterwards... Thanks Elena Pogorelova for the direction

Did similar: Webpack > Manual then back to Automatic. Webstorm picked it up. It's working well now.

For those who also facing this problem.

My situation is that not "Run webpack configuration"

https://www.jetbrains.com/help/webstorm/using-webpack.html#project_security

So either click "Run webpack configuration", or add projects folder to the "Trusted locations"

https://www.jetbrains.com/help/webstorm/using-webpack.html#trusted_projects

Ssahakyan,

huh, thanks to you insight! After that I checked my IDEA NodeJs interpreter and it  has broken path. After I fixed it, aliases that starts with "@" now works well. With broken NodeJs interpreter path aliases have worked but only that not started with "@".

@Julianandreszb this worked for me, Thank you.

Please elaborate on your issue. What do you mean saying that aliases aren't recognized? What does your code look like? Please attach screenshots.

Note: there is normally no need to mark any folders in any way to get it working

I have some aliases in my webpack config

But then I try use this in my code

And I can't use CTRL + B for going to my function. Webstorm doesn't see alisases

This should work. What language is it - javascript or typescript? Can you see any messages about webpackconfig resolving in the event log? Please recreate the issue and provide your idea.log file (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files)/ Note: please don't paste it here, upload it to some file server and share a link

I have the same issue, for js

const aliasResolvers = {
  src: path.resolve(__dirname, "../../src"),
  "@tve/atoms": path.resolve(__dirname, "../../src/components/atoms"),

fixed it, but pointing to config

Nope, doesn't work anymore

I'm seeing this same problem. Preferences point to the webpack file, and I have

resolve: {
  extensions: ['.js', '.jsx'],
  alias: {
    shared: path.resolve(__dirname, 'src/shared'),
    '@shared': 'src/shared',

But it doesn't see the @shared in imports. "Module is not installed," even while files build properly.

Jeremy make sure you don't have any trailing slash '@alias/foo/'

I've the same problem with Vue.js

I'm using the Chris Fritz boilerplate : https://github.com/chrisvfritz/vue-enterprise-boilerplate/

The problem is with the alias on the style Cannot resolve file '@design' :

<style lang="scss" module>
@import '@design';

</style>

Elena Pogorelova Hi! any updates about that problem? WebStorm doesn't see the @aliases in imports

@Andrewtkachenko99 please provide the detailed problem description

Elena Pogorelova

Next.js project

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

// components/Button.js
export default function Button() {
  return <button>Button</button>
}

// pages/index.js
import Button from '@/components/Button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

it works, but Webstorm doesn't see '@/components/Button' this path, stresses and shows "Module is not installed". Also i can't go to Button component

you are right. Thanks for help
P.S its a little bit uncomfortable if you have js project in next.js and want to move step by step in typescript. In that case you have tsconfig.json with allowJs property instead jsconfig and aliases doesn't work in webstorm(

Hello ! Any updates on this issue? I'm facing the same problem and its very annoying.

The path to our webpack dev config is set manually.

Here's my Webpack config :

resolve: {
    alias: {
        '@vue': 'vue/dist/vue.esm.js',
        '@assets': path.resolve(__dirname, 'assets/'),
        '@core': path.resolve(__dirname, 'assets/js/core/'),
        '@website': path.resolve(__dirname, 'assets/js/front_app/'),
        '@admin': path.resolve(__dirname, 'assets/js/admin_app/'),
        '@admin_v2': path.resolve(__dirname, 'assets/js/admin_app_v2/'),
        '@style': path.resolve(__dirname, 'assets/scss/')
    }
},

Sorry, what issue? There are no known issues with webpack aliases recognition; it must be smth specific to your setup