Webstorm does not see @ alias

I made all recommended method. 

1. I set my path to webpack config settings -> Webpack

2. I mark directory as Root.

3. I excluded other folders, includes node_modules.

However, webstorm doesn't see my alias. Help me, please. Linux mint 19

39 comments
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

I have the same issue, for js


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


0
Comment actions Permalink

fixed it, but pointing to config

0
Comment actions Permalink

Nope, doesn't work anymore

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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>
0
Comment actions Permalink

Try prefixing path with ~:

@import '~@design'
1
Comment actions Permalink

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.

1
Comment actions Permalink

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

0
Comment actions Permalink

@Andrewtkachenko99 please provide the detailed problem description

0
Comment actions Permalink

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

0
Comment actions Permalink

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)

0
Comment actions Permalink

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(

0
Comment actions Permalink

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/')
}
},
0
Comment actions Permalink

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

0
Comment actions Permalink

NO, I am having the exact problem!

This is not the first time I hear Elena dismiss something with a comment saying "it must be something specific to your setup"...

0
Comment actions Permalink

As I wrote above, there are no known issues with aliases recognition, so your request for status update makes no sense.

Please create a support ticket , providing your idea.log (Help > Show Log in ...) and a problem description (what files your have issues with, what do your imports look like, etc.). The behavior can be different depending on a language/framework being used, etc.

0
Comment actions Permalink

it doesn't work again

0
Comment actions Permalink

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

5
Comment actions Permalink

Thank you for your insight Ambroise Dhenain!

This fixed my issue with Webpack Alias resolving.

0
Comment actions Permalink

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

0
Comment actions Permalink

Just created new vue project, it's ok?

Why does this work in vscode without any configuration?

0
Comment actions Permalink

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

1
Comment actions Permalink

I'm also having issues in some of my projects. I believe it's related to the config itself.

const path = require('path')
const fs = require('fs')

module.exports = {
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]'
},
plugins: [],
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources/js'),
},
},
devServer: {
public: `${process.env.APP_URL}:${process.env.APP_PORT}/`,
https: {
key: fs.readFileSync(process.env.APP_SSL_KEY),
cert: fs.readFileSync(process.env.APP_SSL_CERT),
},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},
}
}

When I remove the `devServer` property, it is analyzed fine. The event log shows 

Can't analyze webpack.config.js: coding assistance will ignore module resolution rules in this file.
Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.

It sounds like `devServer` isn't supported somehow?

0
Comment actions Permalink

`devServer` is definitely supported. Most probably, the process.env.APP_URL and process.env.APP_PORT can't be resolved during evaluation, causing the issue

0
Comment actions Permalink

I also suspected that the `process.env` properties were the problem, but the following configuration also fails:

module.exports = {
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]'
},
plugins: [],
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources/js'),
},
},
devServer: {}
}

Only when I completely remove the `devServer` property does it recognize aliases. My workaround is to start the dev server, then comment that portion out. The dev server still works and I get IDE support for aliases.

0
Comment actions Permalink

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

1

Please sign in to leave a comment.