2

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.
    • 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
  }
}
  1. 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.

Beltway
  • 508
  • 4
  • 17

3 Answers3

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
ssdev
  • 99
  • 6
  • I checked and updated, IntelliSence actually just autocompleted when I used upper case. Unfortunately this did not solve the issue for me. – Beltway Feb 12 '21 at 12:32
0

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".

Mr Qian
  • 21,064
  • 1
  • 31
  • 41
  • This throws causes a `TS1202: Import assignment cannot be used when targeting ECMAScript 6 or higher` error. – Beltway Oct 28 '20 at 10:18
  • It appears that the previous errors are gone after restarting the machine, but occurs again upon importing modules to further created files. – Beltway Oct 28 '20 at 14:47
  • Try to modify your `tsconfig.json` or `tsconfig.app.json`, change `"module": "es6"` to `"module": "commonjs"`. Then, delete bin and obj folder, restart your project again. – Mr Qian Oct 29 '20 at 03:06
  • Or if you still get the same error, I think you could try to use `import xxx(the same name) from 'xxx'(the same name)` and modify `tsconfig.json` set `target` to `ES5` or `ES3`. – Mr Qian Oct 29 '20 at 05:50
  • Won't I have compatibility Issues when going back to Es5/es3? – Beltway Oct 29 '20 at 14:46
  • change `"module": "es6"` to `"module": "commonjs"` on `tsconfig.json`? Did it work? It is just a test suggestion and you can have a try: change to `ES5`.Also, there is [a similar issue](https://stackoverflow.com/questions/57421543/import-with-require-cannot-be-used-when-targeting-ecmascript-6-or-higher). – Mr Qian Oct 30 '20 at 01:59
  • I just checked the tsconfig and noticed the target is `es5` while module is set to `esnext`. Switching the latter to `es5` doesn't resolve the issue. – Beltway Oct 30 '20 at 09:39
  • Make sure that your `tsconfig.json` file can find the ts files under `lib` node, it uses the relative path. If the `tsconfig.json` and ts files are on the src folder, you should use `"include": ["index.d.ts",..]`, if the `tsconfig.json` in the root folder and ts files are under `src` folder, it should be `"include": ["src/index.d.ts",..]`. Besides, I notice that the target is not set to `es6`. So set `"module": "commonjs"` and `"target": "es6"`. Then, close VS, delete `.vs`, `bin` and `obj` folder. Then,restart vs to test again. – Mr Qian Nov 02 '20 at 08:32
  • I added the files content for reference. Wouldn't es6 and esNext be equivalent here? – Beltway Nov 04 '20 at 15:02
  • merely changing "module" to `commonjs` also doesn't appear to work. – Beltway Nov 04 '20 at 15:04
  • Please try to [share a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) with us or please try to create a new project in vs to test it. – Mr Qian Nov 06 '20 at 07:57
  • I added steps to reproduce, hope that helps. – Beltway Nov 10 '20 at 07:15
0

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.

no error

enter image description here 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.

Beltway
  • 508
  • 4
  • 17