[commonjs] bundle React after deprecated `namedExports`

[popeindustries]

• Rollup Plugin Name: commonjs
• Rollup Plugin Version: 12.0.0
• Rollup Version: 2.11.2
• Operating System (or Browser): MacOS 10.15
• Node Version: 14.3.0

How Do We Reproduce?

https://repl.it/repls/RoundedSnoopyBackend

1. create Rollup config with React input file: input: require.resolve('react'), and with @rollup/plugin-commonjs@12.0.0 and @rollup/plugin-node-resolve@8.0.0 plugins
2. bundle esm output file

Expected Behavior

All React named exports are exported.

Actual Behavior

Named exports are assigned to local variables but not exported:

var react_development_1 = react_development.Children;
var react_development_2 = react_development.Component;
var react_development_3 = react_development.Fragment;
var react_development_4 = react_development.Profiler;
var react_development_5 = react_development.PureComponent;
var react_development_6 = react_development.StrictMode;
var react_development_7 = react_development.Suspense;
var react_development_8 = react_development.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
var react_development_9 = react_development.cloneElement;
var react_development_10 = react_development.createContext;
var react_development_11 = react_development.createElement;
var react_development_12 = react_development.createFactory;
var react_development_13 = react_development.createRef;
var react_development_14 = react_development.forwardRef;
var react_development_15 = react_development.isValidElement;
var react_development_16 = react_development.lazy;
var react_development_17 = react_development.memo;
var react_development_18 = react_development.useCallback;
var react_development_19 = react_development.useContext;
var react_development_20 = react_development.useDebugValue;
var react_development_21 = react_development.useEffect;
var react_development_22 = react_development.useImperativeHandle;
var react_development_23 = react_development.useLayoutEffect;
var react_development_24 = react_development.useMemo;
var react_development_25 = react_development.useReducer;
var react_development_26 = react_development.useRef;
var react_development_27 = react_development.useState;
var react_development_28 = react_development.version;

var react = createCommonjsModule(function (module) {

if (process.env.NODE_ENV === 'production') {
  module.exports = react_production_min;
} else {
  module.exports = react_development;
}
});

export default react;

[simenbrekken]

The culprit seems to be an if-statement at the head of react.development.js that reads:

if (process.env.NODE_ENV !== "production") {

Inside of that isn an IIEF that modifies exports

Uncommenting the if-statement produces a working bundle:

https://repl.it/repls/OldAliveClass

[popeindustries]

And adding @rollup/plugin-replace to inline process.env.NODE_ENV does not fix the issue

[lukastaegert]

The unused variables are indeed rather useless but it looks to me that otherwise, react is correctly assigned to module.exports. So is this just about getting rid of the unused assignments? Or is something functionally not working?

[popeindustries]

This is certainly a problem with the React package itself, but earlier versions of the commonjs plugin had an escape hatch with namedExports where you could manually add all the missing exports

[popeindustries]

@lukastaegert this is about being able to import named exports in addition to default. react-redux, for example, tries to import useMemo: import {useMemo} from 'react'.

In fact, the cjs source for React only exports named exports:

exports.Children = Children;
exports.Component = Component;
exports.Fragment = REACT_FRAGMENT_TYPE;
exports.Profiler = REACT_PROFILER_TYPE;
exports.PureComponent = PureComponent;
exports.StrictMode = REACT_STRICT_MODE_TYPE;
exports.Suspense = REACT_SUSPENSE_TYPE;
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;
exports.cloneElement = cloneElement$1;
exports.createContext = createContext;
exports.createElement = createElement$1;
exports.createFactory = createFactory;
exports.createRef = createRef;
exports.forwardRef = forwardRef;
exports.isValidElement = isValidElement;
exports.lazy = lazy;
exports.memo = memo;
exports.useCallback = useCallback;
exports.useContext = useContext;
exports.useDebugValue = useDebugValue;
exports.useEffect = useEffect;
exports.useImperativeHandle = useImperativeHandle;
exports.useLayoutEffect = useLayoutEffect;
exports.useMemo = useMemo;
exports.useReducer = useReducer;
exports.useRef = useRef;
exports.useState = useState;
exports.version = ReactVersion;

[popeindustries]

...actually, that's not correct either. The entry file re-exports all named exports as default:

module.exports = require('./cjs/react.development.js');

So Rollup is correct here, but users of React expect and rely upon named exports, and without the namedExports option it's not possible to generate a stand-alone bundle of React that other packages can use.

[lukastaegert]

Well, the problem is that for CommonJS, the concept of a named export is only an illusion: There only is an exports object, and assuming that properties of that object have a special meaning if I added them one-by-one instead of just setting the object in one go is merely a heuristic. So if the consumer of your package is again a Rollup build, there should not be a problem as the Rollup build can again pick all properties from the default export if it is using the commonjs plugin. So I assume the problem is with... other bundlers?

[popeindustries]

The use case here is "next generation" dev environments like Snowpack or (my) dvlp that run cjs packages through Rollup to convert them to esm for import directly in the browser (without further bundling). So react is bundled separately from react-redux, which relies upon named exports (that don't exist, as you point out). With namedExports, we could monkey-patch those missing named exports manually.

[lukastaegert]

Well, since it is an entry point you could also just bundle an ESM wrapper file that imports React and exports the relevant properties as actual named exports. I do not see how this is much more effort than manually maintaining a list of named exports in a config file and it would make things more explicit. Or of course bother the React time to switch to this hipster module format that was developed only five years ago. But another story for another time I guess...

[popeindustries]

Ok, will try my luck with a custom wrapper.

[lukastaegert]

I think something as simple as

export {Component, Fragment, useState, …} from 'react' 

should work wonders and should provide minimal overhead.