We’re used to importing React into our web parts using this syntax:

import * as React from "react";

But did you know we can also do it using this syntax:

import React from "react";

How’s that possible? Let us talk about the difference first.

import something from “library-name”; is used to import the default export from that library. A “default export” is that thing that is marked as “default” when exporting code from a module. For example, you might see in a module file an export that looks like this:

export default MyClass;

Now when importing it, you can do it with import myclass from ‘MyClassModule’; Basically, the import something from “lib-name”; is a short hand for this:

import {default as something} from "lib-name";

As long as there is a default export, you can use import something from ‘lib-name’;

Now how about the other syntax (import * as something from “lib-name”)?

This is written when the library does not have a default export, but rather exports multiple objects together; for example, you might have the export looking like this:

export { something1, something2, something3}

See? No default export there.. so you you will need to import all (*) from that module. Which is the case with React.. If you go to React’s source code on Github: react/index.js at main · facebook/react · GitHub you will notice that they do not have export default in their file. But.. why can we do it in SPFx web parts?

The reason is, starting with TypeScript 2.7, there is a property in the tsconfig file that allows the compiler to analyze the exported package and treat the whole package as a default export, so you do not have to write the longer syntax (export * as), this property is called allowSyntheticDefaultImports, and as long as it is set to true, it will allow you to do that!

tsconfig.json