Rollup - react.js does not export Component

I’m trying to use react-redux in a project that’s bundled with Rollup. Unfortunately I’m getting repeated errors about: react/react.js does not export Component (imported by react-redux/es/components/Provider.js)

The following changes to Provider.js fix my issues (all tests passing):

diff --git a/src/components/Provider.js b/src/components/Provider.js
index db39187..030517c 100644
--- a/src/components/Provider.js
+++ b/src/components/Provider.js
@@ -1,4 +1,4 @@
-import { Component, PropTypes, Children } from 'react'
+import * as React from 'react'
 import { storeShape, subscriptionShape } from '../utils/PropTypes'
 import warning from '../utils/warning'
 
@@ -18,7 +18,7 @@ function warnAboutReceivingStore() {
   )
 }
 
-export default class Provider extends Component {
+export default class Provider extends React.Component {
   getChildContext() {
     return { store: this.store, storeSubscription: null }
   }
@@ -29,7 +29,7 @@ export default class Provider extends Component {
   }
 
   render() {
-    return Children.only(this.props.children)
+    return React.Children.only(this.props.children)
   }
 }
 
@@ -46,7 +46,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 Provider.propTypes = {
   store: storeShape.isRequired,
-  children: PropTypes.element.isRequired
+  children: React.PropTypes.element.isRequired
 }
 Provider.childContextTypes = {
   store: storeShape.isRequired,

However this has the side effect of adding

var React = _interopRequireWildcard(_react);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

to both dist/react-redux.js and lib/components/Provider.js

I’m conscious of this having implications which I’m not aware of, so looking for any advice on resolving this issue, either within a Rollup plugin or otherwise.

[blockscoped]

For anyone else following after, the solution here was to use rollup-plugin-commonjs with the following configuration:

commonjs({
    include: [
      'node_modules/**'
    ],
    exclude: [
      'node_modules/process-es6/**'
    ],
    namedExports: {
      'node_modules/react/react.js': ['Children', 'Component', 'PropTypes', 'createElement'],
      'node_modules/react-dom/index.js': ['render']
    }
  })

The namedExports section allows the plugin to correctly find the “named” exports from the React object.

See docs for more details: https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports

[dousaitis]

For React v#16.2.0 the lib file name is slightly different (react.js -> index.js)

commonjs({
  include: 'node_modules/**',
  namedExports: {
    'node_modules/react/index.js': ['Component', 'PureComponent', 'Fragment', 'Children', 'createElement']
  }
})