Typescript does not resolve modules through tsconfig.json's baseUrl

My tsconfig.json:

{
"compilerOptions": {
"module": "es6",
"target": "es6",
"lib": ["dom", "es2016"],
"moduleResolution": "node",
"baseUrl": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "preserve"
},
"files": [
"typings/Core.d.ts"
]
}

 

My project structure:

- node_modules/
- scripts/
- src/
- components/
- services/
- typings/
- www/
- tsconfig.json

 

Whenever I create a component and try to import a service like this:

import { logout } from 'services/authentication/index';

I get an error: 

TS2307: Cannot find module 'services/authentication/index'

Even though simply compiling the Typescript through the CLI works fine. 

 

8
37 comments

You can also see error like:


Warning:Cannot find parent tsconfig.json

Right? WebStorm does support 'baseURL' and correctly generates/resolves imports using it.

The problem is that you have "files":[] section that only includes a file from typings.

If there is a 'files' section in tsconfig.json, WebStorm applies config settings to a file only if it is included in this section (tsc, BTW, works in the same way - see http://www.typescriptlang.org/docs/handbook/tsconfig-json.html):

If the "files" and "include" are both left unspecified, the compiler
defaults to including all TypeScript (.ts, .d.ts and .tsx) files in
the containing directory and subdirectories except those excluded
using the "exclude" property. JS files (.js and .jsx) are also included
if allowJs is set to true. If the "files" or "include" properties are
specified, the compiler will instead include the union of the files
included by those two properties.

So,it doesn't use settings in your tsconfig.json when compiling your files, it uses default TS options instead.

if you like to use TypeScript service, you have to set up your tsconfig.json accordingly. Please see the answer in http://stackoverflow.com/questions/40728785/webstorm-2016-3-error-experimental-support-for-decorators-is-a-feature-that-is for possible solutions

1
Avatar
Permanently deleted user

I'm experiencing the same issue using the latest version of idea. I don't have the issue when compiling using the CLI or when using vscode. I have a very simple tsconfig.json file. The error I see in idea is "cannot resolve directory 'features'" when doing an import like `import { foo } from 'features/foo'`

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true,
"strict": true,
"baseUrl": "./src/",
"typeRoots": ["./node_modules/@types"]
},
"include": [
"src/**/*"
]
}
2

please attach a screenshot of the error.

Do you have TypeScript service enabled in Settings | Languages & Frameworks | TypeScript?

0
Avatar
Permanently deleted user

This is the problem I see in my project as described by others.

The project run just fine, it's just IntelliJ complain about this.

2

Please provide your tsconfig.json

0
Avatar
Permanently deleted user

This is my tsconfig.json file.

Please note that tsconfig.json file is stored not in the root of the project but in ./app/ui directory - if that matters.

 

{
"compilerOptions": {
"alwaysStrict": true,
"noImplicitReturns": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"target": "es5",
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "generated",
"inlineSourceMap": true,
"importHelpers": true,
"baseUrl": ".",
"paths": {
"tslib": [
"../../node_modules/tslib/tslib.d.ts"
]
},
"skipLibCheck": true,
"downlevelIteration": true
},
"exclude": [
"lib"
]
}
0

you will see the same issue if you cd to your ./app/ui directory  and run `tsc -p .` there...

the problem is that your are using "module": "system" in your tsconfig.json

TypeScript has two strategies to resolve module names:

  • node - mimics the way how module names are resolved in NodeJS
  • classic - original strategy that doesn't take node_modules into account when walking up the folder structure looking for modules (see https://www.typescriptlang.org/docs/handbook/module-resolution.html for details).
    Strategy can be specified via moduleResolution compiler option. If this option is omitted compiler will use node when target module kind is commonjs and classic otherwise

So, in your case classic resolution is used, and modules from node_modules are not found. I'd suggest specifying resolution explicitly in your config:

"moduleResolution": "node",

does it help?

2
Avatar
Permanently deleted user

Unfortunately still seeing this issue. I have `moduleResolution: node` set as well.

It seems that Webstorm is struggling to re-index and find modules - it happens at strange times, even on modules that I haven't been rebuilding. Every time something like this crops up I have to restart my project and then the "error" goes away.

Could have something to do with the fact that these modules are symlinked in a parent node_modules folder (I use yarn workspaces). But it works fine after a restart, so I'm thinking that Webstorm just doesn't refresh itself properly and recheck those symlinked modules again.

Its been a rather common occurrence actually with Webstorm and Typescript - whenever something goes wrong with the indexing and Webstorm complains, I restart and it goes away. I must reset my IDE at least 20 times a day...

File -> Synchronize does nothing btw. I've looked around, seems restart is the only thing that works. I wish there was a "Do whatever happens during restart that makes things work again" button...

2

>It seems that Webstorm is struggling to re-index and find modules - it happens at strange times, even on modules that I haven't been rebuilding

TSC errors don't normally have any relation to re-indexing. What Typescript version do you use? Please check Settings (Preferences) | Languages & Frameworks | TypeScript

>Could have something to do with the fact that these modules are symlinked in a parent node_modules folder

Typescript service does indeed have issues with symlinks - see https://youtrack.jetbrains.com/issue/WEB-25420 and linked tickets. But such issues normally are not intermittent

 

>Its been a rather common occurrence actually with Webstorm and Typescript - whenever something goes wrong with the indexing and Webstorm complains, I restart and it goes away

If the errors come from WebStorm own parser, try invalidating caches (File | Invalidate caches, Invalidate and restart)

4
Avatar
Permanently deleted user

I'm using the latest version of Typescript, I try keep it up to date. So that would be 2.6.1 as of now.

Unfortunately I can't access that issue you linked.

I've tried invalidating caches, it just closed all my WebStorm windows (I usually have multiple open for all the different modules I'm working on) and restarted, and then worked - but pretty much exactly the same as what I was doing before, restarting when there was an issue. It's still running into issues with finding my symlinked modules in the index after a bit of work / re-building of those modules.

Another problem that's popping up is that for some reason it refuses to find some exported members from within my symlinked modules at all now, I just have to type them out completely (no indexed autocomplete while typing) and then it suddenly finds them and works. In this case, restarting actually doesn't help. It's a really strange error, because sometimes it will find exported members within a module no problem, and other exported members it will ignore and I will have to manually add.

1
Avatar
Permanently deleted user

Upon further investigation into my second issue there, it appears that if I change the exported members from regularly exported functions, such as:

"export function someFunction() {}"

into:

"export const someFunction = () => {}"

then it works and I get auto-complete for "someFunction" in my other module code. So there is clearly some issue with the indexing of exported functions, I've also noticed this with TypeScript enum objects.

1

>I'm using the latest version of Typescript, I try keep it up to date. So that would be 2.6.1 as of now.

That's the issue. Typescript service integration doesn't work with TypeScript 2.6.x due to breaking API changes. Please try using bundled TypeScript instead. Problem is addressed in upcoming 2017.3

Completion for exported functions works fine for me. If changing TypeScript version doesn't make things any better, please provide exact code snippets/files I can use to recreate the issue

0
Avatar
Permanently deleted user

when will the problem be solved?

0

what problem?

If you have problems, please don't add comments to old threads not related to your issue, create a new one.

0
Avatar
Permanently deleted user

Webstorm doesn't find the tsconfig.json, which is in the rootdir

1

the message indicates that the file being compiled is not included in tsconfig.json.

See https://intellij-support.jetbrains.com/hc/en-us/community/posts/205979284/comments/204851490 above

0
Avatar
Permanently deleted user

It seems this issue was never solved.  I read the all comments and it just goes on circles.  I have a similar issue.  Using IntelliJ idea ultimate.  I have added my d.ts file using :

  "files": [
"typings/Core.d.ts"
]

However, for some reason Intellij does not pickup the type definitions from here. 

TS7016: Could not find a declaration file for module 'luciad/view/Map'. 'C:/Luciad/LuciadRIA_2018.0.03/web/luciad/view/Map.js' implicitly has an 'any' type.

The webpack runs perfectly well but IntelliJ IDE keeps reporting the TS7016 error.

 

 

 

1

>It seems this issue was never solved. 

Most issues in this thread are configuration problems, not bugs, and all them are resolved.

>  I have a similar issue

doesn't look similar to any issue reported in this thread... Also, using

"files": []

for adding type definitions is definitely not a recommended practice.

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

 

-2
Avatar
Permanently deleted user

SOLUTION

I had the same issues. This is my path:

  1. editing alias paths in tsconfig.json
  2. the IDE offers me to shorten corresponding import-paths (good thing)
  3. I take the advice and use the auto-correction methods of IntelliJ
  4. import is shortened and IntelliJ answers with TS2307 error (cannot resove path...). Also the compiler for angular throws the error.
  5. re-running the compiler solves the issue for the compiler but the IDE still shows me TS2307.
  6. HERE COMES THE SOLUTION (thank you @Elena): restarting the TypeScript Service (or IntelliJ) solves the issue for me. Have a look at the next comment to see how to restart the Service.

Using the latest IntelliJ 2019.1.1

2

>re-running the compiler solves the issue for the compiler but the IDE still shows me TS2307.

 

did you try re-starting the Typescript service using Restart TypeScript service button?

5
Avatar
Permanently deleted user

@Elena: Thank you, that solves the problem for me, too! I updated the comment.

-2

Restarting the typescript service sort of worked for me.  I clicked Restart TypeScript Service.  That killed it, but it wouldn't restart by itself.  I had to close and reopen WebStorm, then it started back up.

0
Avatar
Permanently deleted user

Caches.. Never forget to clear your caches and restart. 

@Elena, brilliant! 

 

0

So, I'm using PHPStorm 2020.2 and TypeScript 3.9.7 and I STILL see this same issue. I've been trying to find a way to fix this for a couple of days now with no success. Invalidatinc caches, restarting the TypeScript service, nothing works for me.

Saying that this issue is not a bug but a configuration issue doesn't seem right to me. If I can compile my project perfectly fine with Webpack, if PHPStorm ACTUALLY finds the file (becuase it's doing code completion on it) BUT the internal typescript errors out, this means something is wrong with the way PHPStorm interprets tsconfig.json files within the context of the service.

Here's my tsconfig for reference:

 

{
"compilerOptions": {
"outDir": "./public/js/",
"strict": true,
"moduleResolution": "node",
"module": "esnext",
"target": "es5",
"sourceMap": true,
"baseUrl": "./assets",
"paths": {
"styles/*": ["scss/*"],
"@/*": ["vue/*"],
"vue": ["@vue/runtime-dom"]
}
},
"exclude": [
"node_modules"
]
}

I don't know what to post here... The same issue is posted over and over and over again with similar code examples... tsconfig is in the root directory (it was under /assets/ts, then moved up to /assets then moved up to root... Nothing works...

I'd appreciate a workaround while you guys re-open any tickets related to this bug and fix it.

0

Also, if the solution is include the files within the tsconfig as I read here:

 

WS2016.3 applies config settings to a file only if the file is included in 'files' or 'include' tsconfig.json section. [More info about tsconfig.json]

 

This is just plain wrong. This is not the way webpack uses the typescript compiler at all.

0

Adding this to the tsconfig:

"include": [
"assets/ts/*",
"assets/vue/*"
],

 

removed errors for imports:

import FormInput from '@/Components/contact-form/form-input';

under "assets/vue" but I'm still seeing errors for:

import ContactForm from '@/Components/contact-form';

under "assets/ts"

crazy...

[edit]

Finally, changing the import this:

import ContactForm from '@/Components/contact-form/index.vue';

Fixed the issue in the ts file.

My opinion is that the way typescript runs as a service in PHPStorm is so different than the way it runs under Webpack that it will break in most common configurations. This should be addressed.

1

>My opinion is that the way typescript runs as a service in PHPStorm is so different than the way it runs under Webpack that it will break in most common configurations. This should be addressed.

 

when using webpack, ts files are piped through webpack loaders and not passed to the Typescript compiler directly; and with tsserver the files are processed according to the compiler logic. It's not a bug, and it's not going to be addressed

0

Hello,

just wanted to say that it's 2021, latest Intellij version and this issue is still there:

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"module": "ESNext",
"target": "es2015",
"moduleResolution": "node",
"sourceMap": true,
// "declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
// "noEmitHelpers": true,
"noEmitOnError": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"lib": [
"es2017",
"dom",
"es6"
],
"baseUrl": "./",
"paths": {
"@src/*": [
"src/*.android.ts",
"src/*.ios.ts",
"src/*.tns.ts",
"src/*.web.ts",
"src/*.ts"
]
}
}
}

That is my config, 99% is auto-generated by Nativescript schematics.

 

0
Avatar
Permanently deleted user

This solution is for library node_modules dependencies only to resolve the issue:


So a simple solution for me is to generate .d.ts files. They are automatically identified by IDE and code navigation will work to the files and compile errors will disapear.

If you want to navigate to source code, you can provide the .ts files next to the .d.ts in the dependency of node_modules or use https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003170840-It-is-possible-to-jump-to-TS-source-files-inside-node-modules.

0

Still an issue, pretty sure its intellij confusing things. No point in posting another ts config file, lots of normal examples here. When I restart the IDE, the red disappears.

0

Please sign in to leave a comment.