Question: should we use allowSyntheticDefaultImports:true or skipLibCheck:true in every React project?

[xiaoxiangmoe]

There are currently two ways of writing in the community:

In TypeScript Documentation it write:

import * as React from "react";

and in CRA:

create-react-app/packages/cra-template-typescript/template/src/index.tsx

Line 1 in 9123aae

import React from 'react';

---

For users of a library, both usages are allowed. Because CRA has enabled allowSyntheticDefaultImports and skipLibCheck.

create-react-app/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

Lines 104 to 106 in 30fc0bf

	skipLibCheck: { suggested: true },
	esModuleInterop: { suggested: true },
	allowSyntheticDefaultImports: { suggested: true },

---

But for users of the library, the problem arises:

If I write a library usingimport React from 'react';.

Then downstream users must enable allowSyntheticDefaultImports or skipLibCheck, otherwise they will not be able to use this library in Typescript.

For users who configure webpack and tsconfig themselves, it is common to turn off allowSyntheticDefaultImports and skipLibCheck(default behavior).

---

Question: Which of the following two methods is more recommended?

• Force each project to force skipLibCheck.
• Force each project to force enableSyntheticDefaultImports.
• We should recommend the author of the library to use import * as React from 'react';, but not restrict library users to use import * as React from 'react'; or import React from 'react';

Whichever method we choose, we should specify this behavior in the react / create-react-app / TypeScript documentation website, and we should have some more detailed suggestions for the react library authors and react library users.

---

related issues:

• use named export rather than default export #7586
• Formalize top-level ES exports react#11503

@ianschmitz @gaearon @RyanCavanaugh @DanielRosenwasser @orta

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ianschmitz]

Once the react RFC is figured out we can provide recommendations here I think.

[orta]

FWIW, we recommend skipLibCheck as true since 3.9

WRT: allowSyntheticDefaultImports my personal preference is to have it off, but that depends on the RFC results in general (and probably a shift in culture overall to * as x)

[xiaoxiangmoe]

@orta why we should enable skipLibCheck since 3.9？

[ianschmitz]

In my experience type checking is significantly faster with skipLibCheck on.

[xiaoxiangmoe]

This will be much faster, and I will also set skipLibCheck:true in development.
But this will hide the library errors, so I usually set skipLibCheck: false when compiling in production mode.