Typescript-react-starter: import fails with 'no default export'

[StokeMasterJack]

This import works fine under babel:

import React from "react";

But under TypeScript it complains of:
(1,8): error TS1192: Module '"/Volumes/repos/tc-web-ts/node_modules/@types/react/index"' has no default export.

[snerks]

Have you tried:

import * as React from 'react';

[StokeMasterJack]

Yes. But I have hundreds of files like this. I thought TypeScript was a superset of JavaScript?

[bluetech]

Add "allowSyntheticDefaultImports": true to your tsconfig.json if you want it to work like this.

[nitishdayal]

^ + IME change tsconfig.json > compilerOptions.module to 'es2015'. That's the configuration I've been using on my React/TS projects, allows for the usual default import syntax that most have become accustomed to.

[StokeMasterJack]

Add "allowSyntheticDefaultImports": true to your tsconfig.json if you want it to work like this.

This did not work. Now I am getting this error:

Uncaught TypeError: Cannot read property 'render' of undefined

Here is the entire app:

import React from "react";
import ReactDOM from "react-dom";

function render() {
  ReactDOM.render(
    <h1>Hello</h1>,
    document.getElementById("root")
  );
}
render();

Changing to this fixes it:

import * as React from "react";
import * as ReactDOM from "react-dom";

[DanielRosenwasser]

This has to do with the CommonJS/ES module interop, which is not specified in the ECMAScript standard. In the near future, I believe that Babel and TypeScript will be more aligned on this.

[StokeMasterJack]

The funny thing is that these are all runtime errors.

It's a bit ironic that after converting my code base to TypeScript, I'm now plagued with _runtime_ errors.

[Aqours]

Same issue.

@bluetech "allowSyntheticDefaultImports": true to your tsconfig.json if you want it to work like this.

This is temporary solution.
I think it's a bug when coding with JS and TS.

[rballonline]

I just had the same error, this was the first hit on a google search. Was strange to me as I was importing above just fine and then saw the difference:

import User from "user";

had the error. This:

import {User} from "user";

did not. Might help someone else.

[wk-j]

Try this "esModuleInterop": true

[ZhouYK]

@wk-j it works.thanks

[Mnuzz]

@wk-j Your solution breaks my import of moment.js.

[wk-j]

@Mnuzz You can import moment like this

import moment from "moment"

[Mnuzz]

Apparently not. I'll set up a sample project and show you what happens.

[shanvl]

Neither "allowSyntheticDefaultImports" nor "esModuleInterop" works in my case. Tried fresh CRA with react-scripts-ts and setting up from scratch with Typescript 2.7.2.

[felixrabe]

@Mnuzz did you get around to put together the sample project?

[gogoyqj]

need both
```
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
````

[haseose]

@gogowings Thanks it's work.

[Jun711]

I have set
"allowSyntheticDefaultImports": true
"esModuleInterop": true
but It didn't seem to work.
mine is Angular though

@wtilton
this is because user was a constant export

[hannah-hpcnt]

@Jun711 If your module is esnext, try opting in "moduleResolution": "node" in your tsconfig. (Reference)

[hamza00111]

Try this :
import {React} from "react";

[MartinYounghoonKim]

@gogoyqj Thanks. I solved this problem.

I hope my config helps other.

"compilerOptions": {
     "sourceMap": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "typeRoots": [
      "./node_modules/@types/"
    ],
}

[gpresland]

Following the README, you are supposed to make the following changed in tslint.json:

{
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "extends": [],
+  "defaultSeverity": "warning",
   "linterOptions": {
     "exclude": [
       "config/**/*.js",
       "node_modules/**/*.ts"
     ]
   }
 }

from https://github.com/Microsoft/TypeScript-React-Starter#overriding-defaults

You can also simply add:

+ "defaultSeverity": "warning",

And the issue should go simply be a warning in the console.

[JSEvgeny]

Combination of "allowSyntheticDefaultImports": true, "esModuleInterop": true and in addition "noImplicitAny": false did the trick for me, but I don't really like this solution