tsconfig path aliases stopped to work in phpstorm 2019.1

With previous version i was able to have autocomplete from imported classes, using webpack alias.

After updating to v2019.1, autocomplete stop to work, and phpstorm inspection shows a message saying: "unresolved function or method"...

 

webpack config:

 

resolve: {

alias: {
'@app': path.resolve('./resources/app')
}

 

tsconfig:

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

 

I as able to import like this:

import {ctk} from "@app/services/ctk.service";




And use:

 

ctk.getSomewthing.subscribe()

 

- Now method 'getSomething' is in red color with the message:  'unresolved function or method'

 

 

 

 

18 comments
Comment actions Permalink

webpack aliases work fine for me. What language is it - javascript or typescript? Sample project that shows up the issue would be helpful

0
Comment actions Permalink

i'm using typescript

0
Comment actions Permalink

webpackaliases had never worked in TypeScript; paths resolving is based on path mappings in tsconfig.json - and they do work for me:

 

0
Comment actions Permalink

I'm doing  path mapping in my tsconfig.json:

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

This was working in PhpStorm-2018.1. After upgrading to current version i got this issues.

 

0
Comment actions Permalink

as you can see in screenshot above, similar mappings work fine for me

Please try invalidating caches - does the issue persist?

0
Comment actions Permalink

Invalidating cache didn't help. To make it work again i had to downgrade to version 2018.1

0
Comment actions Permalink

please share a project I can use to recreate the issue

0
Comment actions Permalink

thank you for help. The current project i can't share it, i will build a testing one where i can replicate this and then i will share it with you,

 

Meanwhile i found:

(with v2019.1) Files that use import with aliases under 5th folder level have this problem. BUT for the first levels it works fine.

0
Comment actions Permalink

Test project will be appreciated, thank you!

0
Comment actions Permalink

Sorry for the delay.

I wasn't unable to figure what was the problem until now. I will provide an example soon.

The problem has to do with angular lazy loading. When you define a route in a module like this:

loadChildren: './dashboard/dashboard.customer.module#DashboardModule'

Any component inside the dashboard.customer.module that imports services or other classes with an alias, will produce the  'unresolved function or method' problem described above.

 

 

 

 

 

 

 

0
Comment actions Permalink

I have the same problem with WS 2019.2

Nobody seems to work with TS at Jetbrains. Resolving path in largerer project is always a problem.

Providing an example for such things is problematic because the problem does not occure with one single module...

0
Comment actions Permalink

@elena - for WS (2019.2): does it support multiple `tsconfig.json` files?

I have similar issues with WS where my lower level direction includes (extends) a parent direction `tsconfig.json` and it still gives me import errors. Here is a high level setup description:

/project/   (<< WS project)
        ....
        tsconfig.json   (<< has NO compilerOptions.paths or compilerOptions.baseUrl defined)
        packages/
                modA/
                    tsconfig.json  (<< has baseUrl ++ paths defined)
src/
                    index.ts  (<< getting errors here for import of `modA/utils`
                    utils/
                          index.ts

 

The top-level tsconfig.json looks like this:

/project/tsconfig.json: 

{
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"isolatedModules": true,
"strict": true,
"noImplicitAny": true,
"module": "es6",
"target": "es6",
"moduleResolution": "node",
"jsx": "react",
"lib": ["dom", "es6", "esnext", "dom.iterable", "scripthost"]
}
}

While the `/project/packages/modA/tsconfig.json` looks like this (notice the extends):

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"paths": {
"modA/*": ["./*"]
},
"baseUrl": "./src"
},
"include": ["src/**/*"]
}

 

So that setup fails to recognize the aliases defined at that lower level.  However, if I move the aliases to the top-level `tsconfig.json` that DOES work... but why?

Hope this helps us getting closer to a solution. 

 

 

0
Comment actions Permalink

>does it support multiple `tsconfig.json` files?

Sure it does. It uses the nearest tsconfig.json current file is included in, scanning folders from the file folder up to the project root.

 

It works for me using similar setup:

Please share a sample project that can be used to recreate the issue

0
Comment actions Permalink

Thanks for the quick response. I will try to create a new project that show the problem I'm having when I get a chance here. Thanks for looking into it.

1
Comment actions Permalink

Hi Elena,

I am also facing the same/similar issue.

In 2018.2.4 auto imports for aliases are working fine.

In 2019.1 and 2019.2 they stopped working giving me relative paths instead.

Looking at other similar threads -and by using your suggestion - I managed to narrow it down (for my scenario at least).

In my tsconfig.json

   "paths" : {

      "@alias/*": "path/to/index.ts"

   }

index.ts exports all that I need.

in 2018.2.4 this resulted in an import like this:

   import {sdsd} from '@alias/*'

In 2019+ this is not working any more.

If I change my tsconfig.json to

 

   "paths" : {

      "@alias/*": "path/to/*"

   }

 

then I get an import with an alias -> but different to what was previous

   import {sdsd} from '@alias/blah/blah'

So something has definitely changed.

 

Thanks

0
Comment actions Permalink

Hi Elena

 

Just to add that I am using IDEA Ultimate and not Webstorm.

I'll assume the fix will apply to both.

 

Thanks

0

Please sign in to leave a comment.