score:64
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. :)
score:26
You most likely have "allowSyntheticDefaultImports": true,
set in your tsconfig.json
, which essentially shuts the compiler up about default imports it thinks are invalid. Typescript added esModuleInterop
which does essentially what babel does for module loading.
This allows you to use ES6 default imports even when the source code you're importing doesn't export anything as default
Typescript is strict (follows the rules) when it comes to this, which is why they require you to import * as React from 'react'
. Or requires you to tell it to allow synthetic default imports in its base config.
Source: stackoverflow.com
Related Query
- import * as React from 'react'; vs import React from 'react';
- What is the difference between import * as react from 'react' vs import react from 'react'
- How import object from external JS file in React JS using web pack
- import Event Types from React (TypeScript)
- CDN links for React packages and how to import it when using react using the scripts from CDN
- React Import SVG inline from URL
- React import from parent directory
- how to import data in react from a js file to use in components
- How to properly import React JSX from separate file in Typescript 1.6
- why should we use import React from 'react'
- React crashes when trying to import from symlink
- How to import everything from a module in react using es6?
- How to import from React-Select CDN with React and Babel?
- How can I import React Components as a package/module from some other(non-project) directory?
- Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'
- Import only grid system from bootstrap to react
- what is proper way to import multiple components from same file in react instead of getting each component imported
- How to import React component locally from a different create-react-app project?
- react js how to import only the required function from a file and not the all functions
- How to import file from public folder in react application?
- Import TypeScript modules from local module into React app
- Import React component from Git submodule repository
- Import a module from Node.js into a React app
- React import images from public folder
- React lazy import from cdn
- Difference between let import React from 'react/addons' and import { PropTypes } from 'react/addons'
- Cannot import React JSX from separate file while using Typescript
- Cannot import Drawer component from antd react library
- How to import react modules from an HTML file with no npm/webpack
- React | import images from URL-holding variables - why am I getting wrong paths?
More Query from same tag
- accessing props inside react constructor
- How to render only 5 items in react autosuggest?
- How to display temperature in celsius as RGB in react?
- How to send specific item with onClick function in a subMenu in reactjs?
- Disable Semantic UI dropdown option being selected when tabbing to next element
- Materialize is not working with React, Webpacka. jQuery is not extended
- react and express: get image from public folder
- Custom styling for select all checkbox in antd Table row selection
- mui-datatables hide column headers
- How can I mix string and JSX in react properties?
- Gulp + Browserify + Babelify unexpected token
- Why does the React hook useRef throw an error when used?
- How to do overlapping styles with Styled Components React?
- How to include GreenSock plugin for ScrollMagic in a ReactJS environment?
- How to dispatch an action from reducer react-redux
- TS Read Dependency version from the script inside package.json
- Why does Enzyme's `find()` incorrectly return elements that don't exist?
- Unable to spread an array inside a template literal
- "Warning: Can't call setState (or forceUpdate) on an unmounted component", but component does not have setState?
- How to keep the background color of disabled Button in Material-UI?
- Run reducer after state is updated by another reducer
- React useState not rerendering
- ApexCharts on hiding the vertical dotted line
- ESLintError in plugin 'gulp-eslint' - Parsing error: Unexpected token
- How to test methods and callback using Mocha, Chai, & Enzyme in React-Redux
- Error: 'NotificationsData' is not defined
- Post Request with axios giving error 400. u
- Automate deployment of static website files to S3 after the build
- React.PropTypes.element don't accept React.DOM.input etc
- Background Video in React