WebStorm seemingly having trouble reading tsconfig.json

Avatar
Nathanburgess
Created

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

Votes

1

Share

8 comments
Avatar
Elena Pogorelova
Created

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

3
Avatar
Elena Pogorelova
Created

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
Avatar
Nathanburgess
Created

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

0
Avatar
Nathanburgess
Created

Elena Pogorelova, great, thanks so much!

0
Avatar
Takeshi Tokugawa
Created

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
Avatar
Elena Pogorelova
Created
It works fine for me using same configs and structure
Please share a sample project that reproduces the issue
0
Avatar
Jerome Olivier
Created

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
Avatar
Elena Pogorelova
Created

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.