WebStorm seemingly having trouble reading tsconfig.json

WebStorm doesn't seem to be reading my tsconfig.json and I can't figure out what's going on.

For example, in one file I'm getting this error:

TS1259: Module '"./node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

But as you can see in the config file, esModuleInterop is defined.

Another big issue is it doesn't seem to be resolving path aliases correctly:

TS2307: Cannot find module '@components/Tabs/styled' or its corresponding type declarations.

./tsconfig.json:

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@app/*": ["./*"],
"@components/*": ["components/*"],
"@graphql/*": ["graphql/*"]
},
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "es2019"],
"moduleResolution": "node",
"allowJs": true,
"noEmit": true,
"strict": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"strictNullChecks": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true
},
"exclude": ["node_modules"],
"files": ["custom.d.ts"],
"include": ["next-env.d.ts"]
}

WebStorm 2021.1.2

TypeScript 4.0.5

Node 15.14.0

1
8 comments

How many tsconfig.*.json files do you have in your project? WebStorm built-in compiler service uses the nearest tsconfig.json current file is included in for compiling, traversing the folders hierarchy from current folder up to the IDE project root. Your tsconfig.json only includes 2 files - custom.d.ts and next-env.d.ts, note the "files" and "include" sections; so it's not used for other files processing, they are processed either using the other configs or using the default compiler settings

1

Hi Elena Pogorelova, we just have the one tsconfig.json in the project root. So adding "./**/*" to include should probably fix it?

0

You c an just remove both the "files" and "include" sections to have all .ts files included

3

Elena Pogorelova

I have faced with same issue. I have 2 "tsconfig*.json" and the following project structure:

The main tsconfig.json is applicable only for  "Source" dicrectory:

{

  "compilerOptions": {

    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,

    "strict": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,

    "outDir": "Distributable",
    "declaration": true
  },

  "include": [ "Source/**/*" ]

}

Another one is requires for "Tests" directory, and also for ESLint:

{
  "extends": "./tsconfig.json",
  "include": [ "Source/**/*", "Tests/**/*" ]
}
extends: ./node_modules/@yamato-daiwa/style_guides/ECMAScript.js

parserOptions:

  project: "./tsconfig.test.json"

However, the 

TS1259: Module '"path"' can only be default-imported using the 'esModuleInterop' flag

false positive will not disappear event if i'll add "esModuleInterop": true, directory to tsconfilg.test.json.

0
It works fine for me using same configs and structure
Please share a sample project that reproduces the issue
0

here is a link to a project that produces the problem on Webstorm. Opening the project on VSCode does not generate the error message: https://github.com/jeromeOlivier/valerie/tree/289521afd75c56e27f0e8ff167ba611b4a486ae7

thank you

0

Is it backend/server.ts that reproduces the issue? This file is not included in any tsconfig.json so the default settings are used for its processing;you will face the same issue if you run tsc in terminal:

>tsc backend/server.ts
backend/server.ts:1:8 - error TS1259: Module '"C:/downloads/valerie/node_modules/@types/express/index"' can only be default-imported using the 'esModuleInterop' fla
g

1 import express from "express";
         ~~~~~~~

  node_modules/@types/express/index.d.ts:136:1
    136 export = e;
        ~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

0

Please sign in to leave a comment.