import * as React from ‘react’; vs import React from ‘react’;

by

TL;DR

Indeed ES import statements import default and import * are not the same thing, the fact that they behave the same in this case is a combination of how React authors chose to publish the library and compatibility layers in TypeScript (using esModuleInterop) or Babel and your bundler to make them “just work”. It probably shouldn’t work according to ES6 spec, but today we are still working in an era where JS modules are a mess, so tools like Babel, TypeScript, Webpack, etc try to normalize behavior.

More details:

React is not an ES6 library. If you look at the source code you see this in index.js:

const React = require('./src/React');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

(Note the comment, even in React source code they struggle with ES6 default export compatibility.)

The module.exports = syntax is CommonJS (NodeJS). A browser would not understand this. This is why we use bundlers like Webpack, Rollup, or Parcel. They understand all kinds of module syntax and produce bundles that should work in the browser.

But even though React is not an ES library, both TypeScript and Babel let you import it as if it is (using import syntax, rather than require(), etc), but there are differences between CJS and ES that have to be resolved. One of them is the fact that export = can give you things that ES has no spec-compliant way to import, like a function or a class as the module. To work around these incompatibilities Babel has for awhile allowed you to import CJS modules as if they were exporting something by default, or import as a namespace. TypeScript for awhile didn’t do this, but more recently added that as an option under esModuleInterop. So now both Babel and TypeScript can pretty consistently allow a CJS module to be imported using default or namespace ES imports.

With TypeScript it also depends on how the type-definitions for the library are actually defined. I won’t get into that, but you can imagine situations where thanks to transpilers and bundlers a particular import works at runtime, but TypeScript doesn’t compile without errors.

Another thing worth mentioning is that if you look at the built code for React there is a UMD module version as well as the CJS version. The UMD version includes some gnarly runtime code to try to make it work in any module environment, including the browser. It’s mainly for use if you want to just include React at runtime (ie you don’t use a bundler). Example.

Confusing? Yeah, I think so. 🙂

More Related Contents:

  1. React Native: require() with Dynamic String?
  2. React.createClass vs. ES6 arrow function
  3. react similar JavaScript library [closed]
  4. Unable to access React instance (this) inside event handler [duplicate]
  5. if-else statement inside jsx: ReactJS
  6. New es6 syntax for importing commonjs / amd modules i.e. `import foo = require(‘foo’)`
  7. Using _ (underscore) variable with arrow functions in ES6/Typescript
  8. Typescript export vs. default export
  9. When to use JSX.Element vs ReactNode vs ReactElement?
  10. How to add multiple classes to a ReactJS Component?
  11. React useState hook event handler using initial state
  12. Typescript: React event types
  13. React Native: Getting the position of an element
  14. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  15. Unable to use Arrow functions inside React component class [duplicate]
  16. Best way to polyfill ES6 features in React app that uses create-react-app
  17. How can I disable all typescript type checking?
  18. What is useState() in React?
  19. Navigate to screen after opening a notification?
  20. How to loop over object properties with ngFor in Angular
  21. Update one of the objects in array, in an immutable way
  22. How to hide bottom navigation bar on a specific screen in react native?
  23. Type ‘void’ is not assignable to type ‘((event: MouseEvent) => void) | undefined’
  24. How to disable the selection of an item when the first letter of the option is pressed in the Select component?
  25. How can I dispatch function in redux?
  26. Component won’t update when a redux state change occurs
  27. useMemo vs. useEffect + useState
  28. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. Preserve Type when using Object.entries

Leave a Comment