React-redux: Rollup - react.js does not export Component

[blockscoped]

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.

[gaearon]

React doesn’t really provide ES modules right now, so import React, { Component } is just an artifact of how Babel works.

[timdorr]

This is more of an issue with rollup than our code. We're just writing Javascript and we're not the only library that does this. I would think that's a solution for rollup users out there, but I'm not a user and I don't know what that solution is. I'd ask through the appropriate support channels for rollup.

[blockscoped]

Thanks for the swift response guys. Yes, I'll investigate a solution via Rollup configuration/plugins first.
There's no errors in anyones code, it's just an interop issue.

[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

[dusaitis]

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']
  }
})

[orlov-vo]

Simple components is work, but I have some bug with HOC: ReferenceError: Component is not defined

import React, { Component } from 'react';

export default function someHOC(WrappedComponent) {
  return class ComponentEnhancer extends Component {
     ...
  }
}

but this code is work:

import React from 'react';

export default function someHOC(WrappedComponent) {
  return class ComponentEnhancer extends React.Component {
     ...
  }
}

[thisconnect]

@johndous worked for me, thanks.