CODEWITHSUNDEEP
typescriptwarningswebstormdecorator
Tijl .Reynhout
Tijl .Reynhout

Reputation: 1063

Jetbrains WebStorm gives warning: Experimental support for decorators is a feature that is subject to change

I already have been searching for some time on this warning and setting the experimentalDecorators in my tsconfig file does not seem to remove the warning. I'm working in an Ionic project with Angular. And the IDE I am using is webstorm by JetBrains. If you need additional information, do ask.

My tsconfig.json file: 

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "experimentalDecorators": true,
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "noUnusedLocals": false,
    "noUnusedParameters": false
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/__tests__/*.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Upvotes: 1

Views: 1395

Answers (2)

Alex
Alex

Reputation: 5247

Answer from @Tijl is underrated. However it needs some elaboration

I was struggling with similar error.

TS1192: Module '"fs"' has no default export.

and

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

when using

import fs from "fs";
import path from "path";

inside the vite.config.ts file

Adding the allowSyntheticDefaultImports to tsconfig.json yielded no results (config file obfuscated)

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Then I found an answer from the question owner and added a fix to tsconfig.node.ts

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true // Add it here instead
  },
  "include": [
    "vite.config.ts"
  ]
}

The reason why this solution works could be explained by yet another topic from stackoverflow: https://stackoverflow.com/a/72030801/1215913

Quote:

You need two different TS configs because the project is using two different environments in which the TypeScript code is executed:

  1. Your app (src folder) is targeting (will be running) inside the browser
  1. Vite itself including it's config is running on your computer inside Node, which is totally different environment (compared with browser) with different API's and constraints

so basically for vite specific config files you have to use the tsconfig of a node environment. Or at least it's an explanation that makes the most sense to me, so correct me if it's wrong :)

Upvotes: 0

Tijl .Reynhout
Tijl .Reynhout

Reputation: 1063

I totally forgot I had a file tsconfig.spec.json which was empty. Pasting my configuration from tsconfig.json into the tsconfig.spec.json file fixed the issue. Apparently WebStorm looks for the nearest tsconfig.*.json config file and for me it was the tsconfig.spec.json not the tsconfig.json file.

Upvotes: 2

Related Questions