Definitelytyped: Module '".../node_modules/@types/react/index"' has no default export.

[VincentLanglet]

If you know how to fix the issue, make a pull request instead.

• [x] I tried using the @types/react package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @tkrotoff @DovydasNavickas @onigoetz @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @Hotell @franklixuefei @Jessidhia @pshrmn @threepointone
  
  

If you do not mention the authors the issue will be ignored.

Using

import React from 'react';

Without the allowSyntheticDefaultImports option return an error.

Actually, the types are defined this way

export = React;
export as namespace React;

declare namespace React { ... }

How to fix this the types declarations ?

export default React;
export as namespace React;

declare namespace React { ... }

Is not enough cause now this is invalid.

import { Component } from 'react';

[threepointone]

could you try import * as React from 'react'?

[ferdaber]

export = React; is required as it essentially replaces the entire exports namespace with the right hand side, meaning all properties of the React namespace. It's what allows you to do both a namespace import import * as React from 'react' and destructured import import { Component } from 'react'

If you don't want to use allowSyntheticDefaultImports you should do what @threepointone suggested, which is to do an entire namespace import and then do React.Component.

[VincentLanglet]

@threepointone @ferdaber I do use the allowSyntheticDefaultImports option. Maybe I don't understand it, cause I feel like it's an hack.

For example :

import React from 'react`

works perfectly fine in a js file. So I suppose, it should be the same for a ts file.

[ferdaber]

What is the error you are encountering? Is it a runtime error or a compile-time error? Can you post it here?

[VincentLanglet]

Sorry if I'm not clear.
When I write

import React from 'react'

With allowSyntheticDefaultImports: false I have an error when I use tsc.

'".../node_modules/@types/react/index"' has no default export

With allowSyntheticDefaultImports: true I have no error.

I feel like using allowSyntheticDefaultImports: true is a hack. I maybe don't understand this option.
Since the default import is valid in js files, I thought it should be valid in ts files without the allowSyntheticDefaultImports option.

[ferdaber]

That's inaccurate. JS just never complains because it's JS, it has no concept of typechecking an import statement. React does export its entire namespace as module.exports, you can see it if you check their code:

module.exports = require('react.development.js')

A true default export would be:

module.exports.default = require('react.development.js')

It's just that if you use webpack or any other bundler, it's smart enough to add a compat check that also checks that if no default property is set in the export, to just use the entire export.

allowSyntheticDefaultImports in TypeScript just says "please don't yell at me, and delegate the actual importing logic to whatever bundler I use."

[VincentLanglet]

Thanks for your explanation @ferdaber

[ferdaber]

I should add that the vast majority of TS users will have allowSyntheticDefaultImports enabled because it's essentially a necessity in using any kind of npm package that is meant for the Node environment, because CJS is the defacto standard there.

Moreover esModuleInterop in more recent versions of TS will also just emit that same helper check that I talked about that webpack and other bundlers use, so it's not a huge deal for type definitions to say that a package uses export default foo when it in fact does module.exports = foo, but that's just my opinion 😅