31

I'm upgrading my JavaScript files into TypeScript in Visual Studio 2019, to manage them better.

When I want to import a module from another file, I see squiggly lines complaining that:

x can only be default-imported using the 'esModuleInterop' flag

How should I solve this?

mohammad rostami siahgeli
  • 6,787
  • 9
  • 49
  • 89

6 Answers6

46

A simple solution is to set "esModuleInterop": true in compilerOptions of your tsconfig.json file.

Example:

{
  "compilerOptions": {    
    "esModuleInterop": true
  }
}
lehoang
  • 3,577
  • 1
  • 15
  • 16
  • 11
    this doesn't seem to change anything – naspinski Mar 05 '20 at 17:07
  • 5
    I had to rebuild the app for this to start working. Then the error was fixed. – Koja Apr 09 '20 at 12:55
  • when I use this option, it makes Typescript suddenly start throwing errors about momentjs. ("This expression is not callable" when using moment as a constructor function) – uglycoyote Nov 07 '20 at 00:03
  • Have you tried rebuilding the app like @Koja mentioned? – lehoang Nov 13 '20 at 21:28
  • 2
    In my case I had to restart Sublime Text – Raine Revere Jan 17 '21 at 01:33
  • Hmm, I see that I already upvoted this answer and already have this option set this way, yet `dayjs` is throwing this error for me today. Changing `import dayjs from 'dayjs';` (which used to work) to `const dayjs = require('dayjs');` seemed to fix it. https://day.js.org/docs/en/installation/node-js I don't know why it worked earlier but not now. – Ryan Sep 13 '21 at 18:46
  • If anyone else was seeing this in the default React app on StackBlitz: to reiterate, indeed you just create a `tsconfig.json` file with this answer's contents and save. At least, that made the linting error go away for me. – Kenmore Jan 15 '22 at 05:00
16

I had the same problem and solve it as below:

Change this

import foo from 'foo';

To this

import * as foo from 'foo';
Kamran Taghaddos
  • 452
  • 1
  • 10
  • 22
4

I had this problem after adding a TypeScript JSX file (.tsx extension) using the Visual studio "add new item" feature, even though I did have esModuleInterop=true in my tsconfig. None of my other tsx modules gave this error and I found if I add a new text file and just rename it to .tsx the error doesn't occur.

After much hunting around, the culprit seems to be these lines which had been added to the csproj by visual studio

  <ItemGroup>
    <None Remove="ClientApp\src\public\foo.tsx" />
  </ItemGroup>

  <ItemGroup>
    <TypeScriptCompile Include="ClientApp\src\public\foo.tsx" />
  </ItemGroup>

I deleted them from the csproj and the error went away

Andy
  • 10,412
  • 13
  • 70
  • 95
  • 1
    This seems to be a bug in VS. I have exactly the same issue. Restarting VS19 also seems to fix it – maeneak Apr 24 '20 at 11:41
2

In my case this solution helped:

The Build Action of the tsconfig.json file has to be set to Content. Otherwise Visual Studio ignores this file since VS 2019.

Found it here

tube-builder
  • 686
  • 1
  • 13
  • 29
0

TypeScript supports export = to model the traditional CommonJS and AMD workflow. The export = syntax specifies a single object that is exported from the module. When exporting a module using export =, TypeScript-specific import module = require("module") must be used to import the module.

You can import the module as follows:

import moduleName = require('moduleName');

Please Refer: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

NAJEEM
  • 11
  • 4
0

In my case, the problem was with Visual Studio. Restarting the IDE fixed the problem.

Chris
  • 133
  • 9