Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rollup - react.js does not export Component #643

Closed
blockscoped opened this issue Mar 6, 2017 · 7 comments
Closed

Rollup - react.js does not export Component #643

blockscoped opened this issue Mar 6, 2017 · 7 comments

Comments

@blockscoped
Copy link

@blockscoped blockscoped commented Mar 6, 2017

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

This comment has been minimized.

Copy link
Contributor

@gaearon gaearon commented Mar 6, 2017

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

@timdorr

This comment has been minimized.

Copy link
Member

@timdorr timdorr commented Mar 6, 2017

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.

@timdorr timdorr closed this Mar 6, 2017
@blockscoped

This comment has been minimized.

Copy link
Author

@blockscoped blockscoped commented Mar 6, 2017

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

This comment has been minimized.

Copy link
Author

@blockscoped blockscoped commented Mar 8, 2017

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

chantastic added a commit to learnreact/react-json-fetch that referenced this issue Aug 9, 2017
This fixes some downstream issues I'm having using Rollup and this lib.

reference: reduxjs/react-redux#643
mrbinky3000 added a commit to express-labs/pure-react-carousel that referenced this issue Oct 8, 2017
After adding react-redux to investigate a reported but with context, I discoverted that Rollup has issues with redux.  reduxjs/react-redux#643  Saving before upgrading rollup.
@johndous

This comment has been minimized.

Copy link

@johndous johndous commented Feb 8, 2018

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

This comment has been minimized.

Copy link

@orlov-vo orlov-vo commented Feb 13, 2018

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

This comment has been minimized.

Copy link

@thisconnect thisconnect commented Feb 15, 2018

@johndous worked for me, thanks.

@reduxjs reduxjs deleted a comment from pglewis Jan 13, 2019
@reduxjs reduxjs locked and limited conversation to collaborators Jan 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.