Jetbrains WebStorm has issued a caution about experimental support for decorators, noting that this feature is in a state of flux and may

Question

Jetbrains WebStorm has issued a caution about experimental support for decorators, noting that this feature is in a state of flux and may

No matter how long I've been searching, I can't seem to get rid of this warning even after setting the experimentalDecorators in my tsconfig file. I'm currently working on an Ionic project with Angular, using webstorm by JetBrains as my IDE. If you require any additional information, feel free to ask.

Here's a snippet from 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
  }
}

typescript warnings webstorm decorator

Answer 1

Answer №1

After realizing I had an empty file named tsconfig.spec.json, I decided to copy and paste the configuration from tsconfig.json into tsconfig.spec.json. This simple change resolved the issue I was experiencing. It turns out that WebStorm searches for the nearest tsconfig.*.json config file, which in my case happened to be tsconfig.spec.json rather than tsconfig.json.

Answer 2

After realizing I had an empty file named tsconfig.spec.json, I decided to copy and paste the configuration from tsconfig.json into tsconfig.spec.json. This simple change resolved the issue I was experiencing. It turns out that WebStorm searches for the nearest tsconfig.*.json config file, which in my case happened to be tsconfig.spec.json rather than tsconfig.json.

Answer 3

Answer №2

Underrated input from @Tijl that requires further explanation.

I encountered a similar issue as well.

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

and

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

while trying to utilize

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

in the vite.config.ts file

Even after adding allowSyntheticDefaultImports to tsconfig.json, there was no improvement (config file obscured)

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

Subsequently, I came across a resolution provided by the OP and implemented it in tsconfig.node.ts

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

The efficacy of this solution may be elucidated by referencing another stackoverflow post:

Citation:

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

Your app (src folder) is targeting (will be running) inside the browser

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

Hence, for vite-specific configuration files, utilizing the tsconfig of a node environment is essential. Or at least, it's an explanation that resonates with me the most, so feel free to correct me if inaccuracies are identified :)

Answer 4

Underrated input from @Tijl that requires further explanation.

I encountered a similar issue as well.

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

and

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

while trying to utilize

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

in the vite.config.ts file

Even after adding allowSyntheticDefaultImports to tsconfig.json, there was no improvement (config file obscured)

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

Subsequently, I came across a resolution provided by the OP and implemented it in tsconfig.node.ts

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

The efficacy of this solution may be elucidated by referencing another stackoverflow post:

Citation:

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

Your app (src folder) is targeting (will be running) inside the browser

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

Hence, for vite-specific configuration files, utilizing the tsconfig of a node environment is essential. Or at least, it's an explanation that resonates with me the most, so feel free to correct me if inaccuracies are identified :)

Jetbrains WebStorm has issued a caution about experimental support for decorators, noting that this feature is in a state of flux and may

Answer №1

Answer №2

Similar questions

When using Next.js, I have found that the global.css file only applies styles successfully when the code is pasted directly into the page.tsx file. However, when attempting to

Tips for correctly implementing an authorize function in TypeScript with NextAuth.js

Issues encountered when trying to upload images to Firestore Storage

Problem with Clerk's authentication() functionality

encountering issues with configuring TypeScript LSP in NeoVim with the use of the lazy package manager

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Using the Ajax method from a separate class in TypeScript: A step-by-step guide

Connecting a Database with NestJS and TypeORM: A step-by-step guide to establish a connection with TypeORM and ensure easy access to

Eliminate any unnecessary padding from elements in angular2 components

"Troubleshooting issues with data loading using React's useEffect function

What are the steps to manually activate input validation in Angular 2?

Is it possible to automatically correct all import statements in a TypeScript project?

Encountering a problem with the mock object in Angular 11 unit testing when converting a JSON object to a TypeScript interface

What factors should I consider when determining whether to include @types/* in the `dependencies` or `devDependencies` section?

Having trouble with implementing Spotify OAuth in NextJS?

Incorporating an offset with the I18nPluralPipe

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Error encountered when attempting to pass i18next instance to I18nextProvider