How to use multiple tsconfig.json files in a single Webstorm project?
I'm trying to build a webstorm project where I code both the server (node) and the client in typescript.
My project directory is as follows (directory names changed for easier comprehension):
public
--client_source
----(source directories)
----main.ts
--(other client directories)
index.ts
server_source
--(server source directories)
package.json
...etc
My problem comes up because I'm using a different module system for server and client. Server needs to use commonjs modules, and I want to use Systemjs for the client side modules. Also because systemjs transpiles to es5 I wish to target es6 in the client, but es5 on the server (at least for now).
My first thought would be to have two tsconfig files in the project, but webstorm seems to be confused. Even when I explicitly set all the files for both .tsconfig files (using the handy https://www.npmjs.com/package/tsconfig-glob utility), I can't seem to get it to work.
Currently I have one .tsconfig file in the server_source directory, and another in the client_source directory, each with their proper settings. However on compilation, the tsc compiler only compiles the client code. If I put the server tsconfig.json in the root directory, it attempts to use its settings to compile the client files, leading to errors.
I haven't even tried to accomplish this yet, but matters are further complicated by the fact that I have certain code that needs to be shared by both the client and the server.
The small amount I could find online seemed to indicate that webstorm does indeed support multiple tsconfig files but I couldn't find anything on how that support is supposed to work. If anyone could shed some light on the subject I would be very grateful.
Please sign in to leave a comment.
WebStorm 2016 does support multiple tsconfig.json files. Compiler will use the tsconfig nearest to current file when transpiling your code, so, if everything is setup correctly, client config should be used for compiling client-side code, and server - for server. If this doesn't work for you, please provide a sample project that shows up the issue. Must be a configuration issue
Sorry to revive this old issue, but I have recently run into this issue again, in 2017.2 - here's an example project to demonstrate the problem:
https://github.com/JustASquid/tsconfig_issue_webstorm
I am open to changing the directory layout here, if needed.
Actually both your tsconfig_*.json files are ignored (you can probably see messages like Warning:Cannot find parent tsconfig.json in TypeScript tool window)
The problem is that the TypeScript service only supports configuration files called tsconfig.json - not my_config.json, tsconfig.server.json, etc. The name should be exactly tsconfig.json
I'd suggest moving your tsconfig_server.json to server dir, tsconfig_client.json - to client, and renaming them both to tsconfig.json. Include paths have to be changed accordingly
Is there a way to have 2 tsconfig.json (e.g. tsconfig.app.json and tsconfig.spec.json) in the same directory?
It helps a lot when "*.spec.ts" files are in the same directory as their artifacts under test.
(I use IntelliJ 2017.2.4 Ultimate)
@Heinrich, please see Elena's comment: "The name should be exactly tsconfig.json"
Please vote for https://youtrack.jetbrains.com/issue/WEB-28091
I'm seeing the same problem in 2017.3 EAP (I think it works fine with 2017.2.5 but I need to check some more, switched over to it now)
Getting this error in TS:
However, one can clearly see that the directly has a tsconfig.json file:
The contents of the web-debug/tsconfig.json is:
{"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "web-debug/out-tsc"
},
"files": [
"src/index.ts"
]
}
Also, this isn't consistent. Sometimes it happens, other times I didn't see the error (in EAP)
Can you check if it works using the built-in Typescript version? Tsserver integration with Typescript 2.6+ is broken due to API changes in 2.6, https://youtrack.jetbrains.com/issue/WEB-29282 is fixed in next update (not yet available)
@Elena, I see the same issue with the bundled version (2.5.3)
hmm... the file path is web/common/index.ts in console, but it's shown under web-debug/src in the tree... What's wrong? Is it a symlink?
Ah sorry, see, this is what I'm talking about it not being consistent.
The file structure is like this:
The entire thing is a project, and in it, web-debug is a sub-project in a sense.
But there definitely *is* a tsconfig.json both in the error I had the previous time, and for the path that it errored on this time.
The build is working fine, these errors only pop up in WebStorm for me.
Please can you provide a sample project I can use to recreate the issue? It can just include 3 dummy .ts files (like in your picture) and both tsconfig.json files (if you are able to reproduce the issue using such reduced example)
I tried creating a dummy project that's based on the actual one I'm working: https://github.com/nomaed/test-multiple-tsconfig
However, for now I haven't seen this issue happening. But this isn't too surprising since it doesn't *always* happen on the real project too. It happens sometimes, and at different files. I wasn't able to figure out what triggers this yet.
can't recreate using provided project
Note: please make sure to switch to bundled typescript version - as I wrote, 2.6.1 doesn't currently work as expected
I know, I tried with the bundled version on my real project and it didn't change anything.
Also, I updated to TS 2.5 in the dummy package.json
I will write if I see this happening again or have any insights.
Just my two cents regarding similar issue. In my case it was a legacy Angular project with several nested tsconfig.json, with TypeScript service disabled (PhpStorm 2020.1 EAP, Build #PS-201.6073.25, built on March 5, 2020), but deeper tsconfig.json had syntax errors, and was ignored by IDE (without visible warnings, event log is empty).
Specific syntax error was stray comma (like {"key":"value"-->,<--}, which for some reason was OK for TS compiler (the project has many successful builds with that config), but caused all imports to be invalid.
Removing that stray comma instantly fixed all import errors in editor UI.