Module resolve error if tsx file is included in the project item group

Question

I created a fresh asp.net core project with react template and configed Typescript for it.

Then I made a very simple file called Test.tsx with the following code

import React from 'react';

class Test extends React.Component {

    render() {
        return (
            <div/>
        );
    }
}

export default Test;

This resulted in error

Error TS1192 (TS) Module '"***/React/React/ClientApp/node_modules/@types/react/index"' has no default export.

Then I copy pasted the file in the same location and named it Test2.tsx. The error just magically disappeared.

I did some more digging and found that if I add the file using right click -> Add new item -> TypeScript JSX File then it would add an entry in the .csproj file

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

Removing this line would make the compile error go away. But why is this happening?? Do I have to go and delete this line every single time I want to add a new TSX file?

Using Visual Studio 2017 and TypeScript 3.1.3

Answer 1

Since the react module does not have a default export (at least according to the declarations in @types/react), if you want to import React from "react" and get the whole module, you need to enable the esModuleInterop TypeScript compiler option. If you have a tsconfig.json file, then you can just add "esModuleInterop": true to the "compilerOptions" block there. If you don't have such a file, then I don't know how to change TypeScript options for your Visual Studio project.

I suspect that deleting the TypeScriptCompile line from your .csproj file is not a good solution. The fact that it makes the error go away suggests that it may be stopping your .tsx file from being checked for errors at all (or at least stopping it from being checked according to your main TypeScript options), which could allow problems to go undetected in the future.