How to solve "can only be default-imported using the 'esModuleInterop' flag" in Visual Studio 2019?

Question

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?

Answer 1

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

Example:

{
  "compilerOptions": {    
    "esModuleInterop": true
  }
}

Answer 2

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