1

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
  }
}

Tijl .Reynhout
  • 901
  • 2
  • 9
  • 24
  • 3
    the IDE must be using a different config for these files. In case of multiple configs, the Typescript service uses the nearest `tsconfig.*.json` config current file is included in, scanning folders from the file folder up to the project root. If the file the error reported against is included in some specific config that doesn't have `"experimentalDecorators"` enabled, you will see the error – lena Apr 12 '20 at 13:02
  • This seems to work. Thanks alot I will recap in an answer! – Tijl .Reynhout Apr 12 '20 at 13:21

2 Answers2

2

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.

Tijl .Reynhout
  • 901
  • 2
  • 9
  • 24
0

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 :)

Alex
  • 4,607
  • 9
  • 61
  • 99