Formalize top-level ES exports

[gaearon]

Currently we only ship CommonJS versions of all packages. However we might want to ship them as ESM in the future (#10021).

We can't quite easily do this because we haven't really decided on what top-level ES exports would look like from each package. For example, does react have a bunch of named exports, but also a default export called React? Should we encourage people to import * for better tree shaking? What about react-test-renderer/shallow that currently exports a class (and thus would start failing in Node were it converted to be a default export)?

[Andarist]

Imho import * is a way to go, Im not opposed to having a default export too, but it shouldnt be used to reexport other stuff like in this example:

export const Component = ...
export default React
React.Component = Component

[gaearon]

but it shouldnt be used to reexport other stuff like in this example:

Is there a technical reason why? (Aside from having two ways to do the same thing.)

My impression is that people who would import * (and not use the default) wouldn't have problems tree shaking since default would stay unused. But maybe I overestimate Rollup etc.

[Andarist]

That questions can be probably best answered by @lukastaegert. Ain't sure if something has changed since #10021 (comment)

Also Rollup is not the only tree shaker out there, and while webpack's tree-shaking algorithm is worse than the one in rollup, it's usage is probably way higher than rollup's (both tools do excellent jobs ofc, I don't want to offend anyone, just stating facts) and if we can (as the community) help both tools at once we should do so whenever we can.

[jquense]

is tree-shaking going to do anything in React's case, given that everything is preprocessed into a single flat bundle? I wonder what the primary import style is for React, personally i tend to treat it like a default export e.g. React.Component, React.Children but occasionally do the named thing with cloneElement

[lukastaegert]

As @gaearon already stated elsewhere, size improvements in case of react are expected to be minimal. Nevertheless, there ARE advantages:

• React.Children might probably be removed in some cases (so I heard 😉)
• React itself can be hoisted into the top scope by module bundlers that support this. This could again remove quite a few bytes and might also grant an oh-so-slight performance improvement. The main improvement would lie in the fact that there does not need to be another variable that references React.Component for every module but just one that is shared everywhere (this is how rollup usually does it). Also, though this is just me guessing, this might reduce the chance of webpack's ModuleConcatenationPlugin bailing out
• Static analysis for react is easier not only for module bundlers but also for e.g. IDEs and other tools. Many such tools already do a reasonable job at this for CJS modules but in the end, there is a lot of guessing involved on their side. With ES6 modules, analysis is a no-brainer.

As for the kind of exports, of course only named export really provide the benefit of easy tree-shaking (unless you use GCC which might be able to do a little more in its aggressive move and maybe the latest rollup if you are really lucky). The question if you provide a default export as well is more difficult to decide:

• PRO: Painless migration for existing ES6 code bases (e.g. what @jquense describes)
• CON: Since everything is attached to a common object, once this object is included, all its keys are included at once which again defeats any attempts at tree-shaking. Even GCC might have a hard time here.

As a two-version migration strategy, you might add a default export in the next version for compatibility purposes which is declared deprecated (it might even display a warning via a getter etc.) and then remove it in a later version.

[gaearon]

This is also an interesting case: #11526. While monkeypatching for testing is a bit shady, we'll want to be conscious about breaking this (or having a workaround for it).

[Rich-Harris]

Came here via this Twitter conversation. For me, there's a clear correct answer to this question: React and ReactDOM should only export named exports. They're not objects that contain state, or that other libraries can mutate or attach properties to (#11526 notwithstanding) — the only reason they exist is as a place to 'put' Component, createElement and so on. In other words, namespaces, which should be imported as such.

(It also makes life easier for bundlers, but that's neither here nor there.)

Of course, that does present a breaking change for people currently using a default import and transpiling. @lukastaegert probably has the right idea here, using accessors to print deprecation warnings. These could be removed in version 17, perhaps?

I don't have a ready-made suggestion for #11526 though. Perhaps shipping ESM would have wait for v17 for that reason anyway, in which case there'd be no need to worry about deprecation warnings.

[gaearon]

People have really come to like

import React, { Component } from 'react'

so convincing them to give it up might be difficult.

I guess this is not too bad, even if a bit odd:

import * as React from 'react';
import { Component } from 'react';

To clarify, we need React to be in scope (in this case, as a namespace) because JSX transpiles to React.createElement(). We could break JSX and say it depends on global jsx() function instead. Then imports would look like:

import {jsx, Component} from 'react';

which is maybe okay but a huge change. This would also mean React UMD builds now need to set window.jsx too.

Why am I suggesting jsx instead of createElement? Well, createElement is already overloaded (document.createElement) and while it's okay with React. qualifier, without it claiming it on the global is just too much. Tbh I’m not super excited about either of these options, and think this would probably be the best middle ground:

import * as React from 'react';
import { Component } from 'react';

and keep JSX transpiling to React.createElement by default.

[Rich-Harris]

Confession: I always found it slightly odd that you have to explicitly import React in order to use JSX, even though you're not actually using that identifier anywhere. Perhaps in future, transpilers could insert import * as React from 'react' (configurable for the sake of Preact etc) on encountering JSX, if it doesn't already exist? That way you'd only need to do this...

import { Component } from 'react';

...and the namespace import would be taken care of automatically.

[gaearon]

In a distant future, maybe. For now we need to make sure transpilers work with other module systems (CommonJS or globals). Making this configurable is also a hurdle, and further splits the community.

[Andarist]

What @Rich-Harris suggested (inserting a specific import when jsx is used) is easily done by transpilers plugin. The community would have to upgrade their babel-plugin-transform-react-jsx and that's it. And of course even existing setups would still work if only one adds import * as React from 'react'; to the file.

Of course we need to consider other module systems, but it doesn't seem like a hard problem to solve. Are there any specific gotchas in mind?

[gaearon]

Of course we need to consider other module systems, but it doesn't seem like a hard problem to solve. Are there any specific gotchas in mind?

I don’t know, what is your specific suggestion as to how to handle it? Would what the default be for Babel JSX plugin?

[jamiewinder]

People have really come to like

import React, { Component } from 'react'

What people? Come forth so that I may mock thee.

[gaearon]

I did that a lot 🙂 Pretty sure I've seen this in other places too.

[Andarist]

Default is at the moment React.createElement and it would pretty much stay the same. The only problem is that it assumes a global now (or already available in the scope).

I think as es modules are basically the standard way (although not yet adopted by all) of doing modules, it is reasonable to assume majority is (or should) use it. Vast majority already uses various build step tools to create their bundles - which is even more true in this discussion because we are talking about transpiling jsx syntax. Changing the default behaviour of the jsx plugin to auto insertion of React.createElement into the scope is imho reasonable thing to do. We are at the perfect time for this change with babel@7 coming soon (-ish). With recent addition of babel-helper-module-imports it is also easier than ever to insert the right type of the import (es/cjs) to the file.

Having this configurable to bail out to today's behaviour (assuming present in scope) seems really like a minor change in configuration needed for a minority of users and an improvement (sure, not a big one - but still) for majority.

[kzc]

Should we encourage people to import * for better tree shaking?

Thanks to @alexlamsl uglify-es has eliminated the export default penalty in common scenarios:

$ cat mod.js 
export default {
	foo: 1,
	bar: 2,
	square: (x) => x * x,
	cube: (x) => x * x * x,
};

$ cat main.js 
import mod from './mod.js'
console.log(mod.foo, mod.cube(mod.bar));

$ rollup main.js -f es --silent | tee bundle.js
var mod = {
	foo: 1,
	bar: 2,
	square: (x) => x * x,
	cube: (x) => x * x * x,
};

console.log(mod.foo, mod.cube(mod.bar));

$ uglifyjs -V
uglify-es 3.2.1

$ cat bundle.js | uglifyjs --toplevel -bc
var mod_foo = 1, mod_bar = 2, mod_cube = x => x * x * x;

console.log(mod_foo, mod_cube(mod_bar));

$ cat bundle.js | uglifyjs --toplevel -mc passes=3
console.log(1,8);

[Andarist]

wow, that's great new 👏 is uglify-es considered to be stable now? I recall you mentioning few months back that it isn't there quite yet, but I can remember that incorrectly, so ain't sure.

Anyway - that's all and nice in a rollup world, but considering that React is bundled mostly in apps and those use mostly webpack which does not do scope hoisting by default, I'd still say that exporting an object as default should be avoided to aid other tools than uglisy-es+rollup in their efforts to produce smaller bundle sizes. Also for me it is semantically better to avoid this - what libs actually do in such cases is providing a namespace and it is better represented when using import * as Namespace from 'namespace'

[kzc]

is uglify-es considered to be stable now?

As stable as anything else in the JS ecosystem. Over 500K downloads per week.

that's all and nice in a rollup world, but considering that React is bundled mostly in apps and those use mostly webpack which does not do scope hoisting by default

Anyway, it's an option. Webpack defaults are not ideal anyway - you have to use ModuleConcatenationPlugin as you know.

[lukastaegert]

Adding a few cents here:

• I totally agree with @Rich-Harris that semantically, named exports are the right choice
• I really do not like either import React from 'react' or import * as React from 'react' just to be able to use JSX syntax. In my eyes, this design is clearly violating the Interface Segregation Principle in that it forces users to import all of React just to be able to use the createElement part (though admittedly with a namespace export, a bundler like Rollup will strip out the unneeded exports again)

So if we are at a point where we might make breaking-change decisions, I would advise to change this so that JSX depends on a single (global or imported) function. I would have called it createJSXElement(), which in my opinion describes it even better than createElement() and no longer needs the React context to make sense. But in a world where every byte counts, jsx() is probably ok, too.

This would also at last decouple JSX from React in a way such that other libraries can choose to support JSX by using the same transformation and supplying a different jsx function. Of course you have a lot of responsibility here guiding countless established applications through such a transformation but from an architectural point of view, this is where I think React and JSX should be heading. Using Babel to do the heavy lifting of such a transformation sounds like a great idea to me!

[Andarist]

Personally I do not see much gain in migrating to jsx helper as the default IMHO for the babel plugin should be importing it from the react package, so the name of the actual helper doesn't really matter - the rest is just matter of having it configurable.

[NMinhNguyen]

This is probably slightly tangential to the main discussion, but I'm curious how well ES modules work with checking process.env.NODE_ENV to conditionally export dev/prod bundles? For example,

react/packages/react/npm/index.js

Lines 3 to 7 in d9c1dbd

	if (process.env.NODE_ENV === 'production') {
	module.exports = require('./cjs/react.production.min.js');
	} else {
	module.exports = require('./cjs/react.development.js');
	}

I may be missing something obvious here, but I'm struggling to see how to translate this pattern into ES modules?

[milesj]

@NMinhNguyen Conditional exports aren't possible with ES modules.

[Andarist]

process.env.NODE_ENV checks can be at more granular (code) level though, ready to be replaced by the bundler with appropriate values.

[NMinhNguyen]

@Andarist @milesj Thanks for confirming my suspicion :)

process.env.NODE_ENV checks can be at more granular (code) level though, ready to be replaced by the bundler with appropriate values.

From the React 16 blog post I thought that the process.env.NODE_ENV checks were pulled out to the very top on purpose (as opposed to them being more granular, which is what they are in the source, if I'm not mistaken), to help performance in Node.js?

Better server-side rendering

React 16 includes a completely rewritten server renderer. It's really fast. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.

Like, I'm not sure how one could use the module field in package.json and differentiate between dev/prod for ESM while keeping ES bundles flat and not affecting Node.js perf

[Andarist]

Like, I'm not sure how one could use the module field in package.json and differentiate between dev/prod for ESM while keeping ES bundles flat and not affecting Node.js perf

This for sure is a drawback, because there is no standard way at the moment for doing this. OTOH it's just a matter of tooling, it is possible (and it's rather easy) to compile this in build steps of your application even today. Ofc it would be easier if package could expose dev/prod builds and the resolver would just know which one to pick, but maybe that's just a matter of pushing this idea to tooling authors.

[wereHamster]

There is currently much confusion about whether to import React from or import * as React from. Both work, currently, but that's only accidental due to how ESM imports of CommonJS modules are treated by bundlers.

I'd really appreciate an official stance by the React developers as to which form will be supported once React starts providing native ESM, so that we can start educating people now, update examples, blog posts, provide linter rules, emit bundler warnings etc now, rather than wait with it until the ESM support finally ships…

[milesj]

Pretty sure the path forward is named imports only, so import { useState } from 'react';. The default import is no longer required if you are using the new automatic JSX transform.

At work, we completely removed the default import and used the new transformer without any issues. It's much much cleaner.

[bvaughn]

@milesj is correct. The "React" import is no longer required for JSX usage, thanks to the efforts of @lunaruan last year (via #16626 and a few other related commits)

[hronro]

I'm a little bit confused about the roadmap now. If ES module will not come with v18.0, will it come with v18.x or v19.0? (or ... even later?)

I'm not sure if React.js follows semantic versioning. If it does, it's actually OK to introduce a breaking change in a major release.

If React.js doesn't follow semantic versioning and finally supports ES module in v18.x, it's still weird that React.js does not introduce breaking changes in a major version but introduces them in a minor version.

If React.js finally supports ES module in v19.0, OK, maybe we have to wait another 4 years for the ES module support.

[thientran1707]

may I know if we have any status for the ESM module support from React?

[wereHamster]

If #18102 is to be believed, then the react team has decided on ESM exports… namely on using named exports instead of a default export. So… can this be closed?

[junyin-ms]

ES modules have been supported in major browsers for over 5 years now. When would an official ESM version of React be finally published?

[GabrielDelepine]

When would an official ESM version of React be finally published?

If the transition to ESM is not made properly, it will be a terrible mess. I am like you, I can't wait but I definitely prefer the team to take enough time to ship something great. Don't underestimate the amount of work, it's huge because they are so many implications

Until then, I am loading react and ReactDOM as a UMD global in my ESM repos and it's doing the job. Everything stays typed out of the box

package.json

{
  "type": "module"
}

tsconfig.json (Typescript 5.0)

{
  "compilerOptions": {
    "allowUmdGlobalAccess": true,
    "jsx": "react",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "resolveJsonModule": true,
    "strict": true,
    "target": "ES2022",
    "verbatimModuleSyntax": true
  }
}

index.html

    <script type="importmap">
      {
        "imports": {
               <====== list your ESM dependencies here
        }
      }
    </script>
    <!-- of course, only expose the desired files on production, not your complete node_modules/ folder -->
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="module" src="./index.js"></script>

[xiaoqiang1999]

Please support ESM as soon as possible, it is useful, thanks.
For example, Vue.js supported ESM long ago.

It is currently available for temporary use https://esm.sh/ To get the ESM package for React.

[Starcounter-Jack]

I second the suggestion to use https://esm.sh/react@18 as they have provided a proper modern ESM distribution of React for a very long time. Just remember to use the import-map in your html for the "react". It tells what version of react the bare import should resolve to (just as in package.json).

No need for bundlers or arcane legacy module stuff. Bundling is for optimisation and for legacy browser support and should provide compatibility with ESM and not fight against it.

IMHO, a bundler should no longer be a development time dependency in 2023.

Just do:

import React from "react" 

[jonkoops]

So our current thinking is that when we go ESM, we might want to try go ESM all the way. No CJS at all — or separated in a compat legacy package. This won't happen in React 17 and is unlikely in 18, but is plausible to try in React 19.

@gaearon Now that the new JSX transform has been out for a while, there should no longer be a blocker right? Perhaps the time is right to do this with React 19. How would you feel if I drafted up a renewed proposal along the lines of reactjs/rfcs#38?

[luzzif]

Guys please, is there any update on this?

[alshdavid]

Bundling is for optimisation [..] IMHO, a bundler should no longer be a development time dependency in 2023.

While it's not as much of a problem in smaller applications, larger application with hundreds/thousands of sources files will always have a need for a build step as shipping sources directly cannot be as efficient as a tool designed to organize sources into an optimized output.

"Bundlers" are reasonable as they can take advantage of compression, dead code elimination, and consuming invalid browser sources (like JSX syntax, TypeScript, importing css into JS, importing images, markdown, plaintext, json, etc).

You could argue that you could just use a minifier and strip types on your sources before publishing.... but then you're basically making a bundler.

For the most part in 2024, it's practical to think of JavaScript as simply a pseudo "binary" format for the web that compilers target.

should provide compatibility with ESM and not fight against it.

I'm advocating for React being distributed in spec-compliant ESM that can be run directly in the browser - with or without a bundler.

As a bundler developer, I wish wholeheartedly that all web applications/libraries would be written in spec-compliant ESM but it's just not like that in the real world.

Even packages distributed today as ESM packages often still use Nodejs's CJS resolution algorithm, omit extensions from imports, etc. So not even ESM packages are really valid ESM - it's a nightmare.

React, CJS and Optimising Outputs

React being distributed as CJS forces bundlers to de-optimize everything relating to React. It cannot be tree-shaken and forces bundlers to ship CJS emulation/polyfills to the browser when React is present.

One example of a deoptimization is; because CJS exports can be modified at runtime, bundlers cannot assume stable exports for CJS values.

For example, look at this abomination:

const foo = require('./something')

setTimeout(() => {
  foo.bar = 'I reassigned a value in another module at runtime'
}, 2000)

Why is this legal?!?! 😆

So bundler CJS emulation involves checking the value of every module.exports property every single time it is accessed. This makes every single property access 10x slower with CJS than ESM (which can be heavily optimised).

In the case of React, how many times do you call createElement? Every call must recompute the exported value at runtime which is absurdly wasteful.

For the love of all things good, please distribute React as unminified, browser compliant, ESM

[hronro]

What a shame that there is still no ESM support in the final React.js v19.0 release, or not even mention it in the release blog post.

[jonkoops]

My guess would be that making the new JSX transform mandatory was a first step towards this, so perhaps it will be React v20 that will enforce ESM? Still, kind of sad to not see at least a formal plan or acknowledgement since this is in the top 10 most upvoted issues.

[spamshaker]

this is really one liner to build it for production - maybe this way it could be exposed temporarly

bun build --minify --outfile=./dist/react.mjs ./node_modules/react/cjs/react.production.js
and adding "module"="./dist/react.mjs" to a package.json

same goes for other packages

[spamshaker]

I'm sorry I can't wait longer. I will switch to the target solution when this issue will be resolved, but now I dealt with it myself => https://github.com/ria-develop/react-esm

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Example of React ESM use case</title>
  <script type="importmap">
    {
      "imports": {
        "react/jsx-runtime": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
        "react": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
        "react-dom": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
        "react-dom/client": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm"
      }
    }
  </script>
  <script type="module">
    import { createRoot } from "react-dom/client";
    import { StrictMode, Suspense } from "react";
    import { jsx, jsxs } from "react/jsx-runtime";

    function App() {
      return jsxs(Suspense, { fallback: "Loading...", children: ['hello'] });
    }

    const root = createRoot(document.getElementById("root"));
    root.render(jsx(StrictMode, { children: jsx(App, {}) }));
  </script>
</head>
<body>
<div id="root"></div>
</body>
</html>

till then, I am going to prepare a gitlab action which will rebuild it and sync versions with react releases

[aladdin-add]

@spamshaker you don't have to do this - there are several cdns can serve for this, e.g. https://esm.sh/:

import React from "https://esm.sh/react"

[alshdavid]

Or just use Preact