Intellisence falsely marks import errors despite deleting .vs-Folder

Question

I'm using Visual Studio 2019 and TypeScript 3.9.

I continued working on a React/.NET project when upon creating a few new tsx files Intellisence displayed a few errors, such as:

• TS1259: [...] can only be default-imported using the 'esModuleInterop' flag
• TS2307: can not find module [...]

The former shows up only in the new files, the latter in the index.d.ts file which a haven't modified since it worked the last time.

I verified:

• The correct tsconfig file is targeted (the project only contains one).
• I set the tsconfig file's build setting from 'None' to 'Contenct'.

Even after deleting the .vs folder and restarting VS it won't work.

EDIT: "esModuleInterop": true is also verified.

EDIT: Steps to reproduce:

1. Instal VS 2019 and Node.
2. Create a new React/.NET Core project in VS2019.
3. • Upgrade the react scripts to the latest with npm upgrade react-scripts --latest
4. Remove all eslinting packages with npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react¹
5. Install or upgrade TypeScript
6. To install TypeScript use npm install typscript --latest --save-dev
7. or if you already have TypeScript installed you can upgrade with npm upgrade TypeScript --latest
8. Install the TypeScript definition files with npm install @types/node @types/react @types/react-dom @types/react-router
9. Create the following tsconfig file:

  "include": [
    "src/*"
  ],
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

10. Create a new .tsx file and install and import some packages:

    import React, { Component } from 'react';
    import * as microsoftTeams from "@microsoft/teams-js";
    import { Button } from "@fluentui/react-northstar";
    import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

It may or may not result in an TS2307 error.

Answer 1

I was still having issues with this, but after searching SO for an answer I realized the tsconfig (at least when read in Visual Studio 2019) is case sensitive. So when I changed my config to have

...
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "Node"
...

my errors went away. Other steps we took:

• update VS (via menu Help -> Check for Updates)
• Download and ran the latest typescript extension for VS (for us it was 4.1)
• Restart VS after all the above

Answer 2

Please try to add this in your new tsx file:

import _ = require('xxx'); // xxx is the name of [...]

Also, try to modify your tsconfig.json or tsconfig.app.json, change "module": "es6" to "module": "commonjs".

Answer 3

I recently caught IntelliSense red-handed as i created two new tsx-files and it marked the error in one file but not the other.

Thus I tried a complete refactor and updated React and its types to Version 17.0:

  "dependencies": {
    "@types/react-router-dom": "^5.1.6",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "typescript": "^3.7.5"
  },

The reference issues were gone afterwards. I assume it was caused by the React types having a different version than react itself. I omitted default imports though and kept to the import * as React from 'react';-syntax. Default imports might occasionally not work, but you can avoid IntelliSense not recognizing state and props which was the main issue.