Next.js: TransitionGroup addon causes "Only a ReactOwner can have refs"

[frol]

With a help of @mlaursen (https://github.com/mlaursen/react-md/issues/150), I minimized the reproduction of the bug we encounter in #119 and #196.

Here is the pages/index.js:

import React from 'react'
import TransitionGroup from 'react-addons-transition-group'

class Test extends React.Component {
  render() {
    return <div ref={woop => console.log(woop)} />;
  }
}

export default class App extends React.Component {
  render() {
    return <div>
      <TransitionGroup>
        <Test key="test-1" ref={test => console.log(test)} />
      </TransitionGroup>
    </div>
  }
}

Once you open the page, you will get the following in your browser console:

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
Warning: getInitialState was defined on ReactTransitionGroup, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
<div data-reactid="3"></div>
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

If I drop the TransitionGroup component, the page works fine.

Does anyone have a clue of what is the cause of this issue?

[frol]

This seems to be the issue in react-addons-transition-group package handling: https://github.com/facebook/react/issues/7874

[frol]

Inspecting the HTML response from Next.js server, I see that ReactJS gets bundled inside the __NEXT_DATA__, while it is also bundled in next-dev.bundle.js, so it ends up with two copies of ReactJS on a page.

[frol]

Given the fact that react-addons require private ReactJS methods access (i.e. they require to be bundled together with ReactJS), it seems that Next.js should consider one of the following approaches:

• Don't bundle ReactJS into Next.js, and provide developers a choice of using either "pure" ReactJS or ReactJS-with-addons
• Provide extra Next.js bundles for ReactJS-with-addons (Next.js will end up with 4 bundles: dev/prod * ReactJS-with-addonds/ReactJS-without-addons)

/cc @nkzawa

[nkzawa]

Don't bundle ReactJS into Next.js, and provide developers a choice of using either "pure" ReactJS or ReactJS-with-addons

Actually, we are considering if should do this.
It allows users to use any versions of React and make things more explicit.

[frol]

@nkzawa Do you have it on your roadmap? It is quite critical to me as I was going to start a new project as soon as possible, and I would like to use UI toolkits, which heavily use the React Animation add-ons...

If it is not on the roadmap, could you, please, guide me on how I can build a custom Next.js bundles with ReactJS-with-addons?

[nkzawa]

Unfortunately, it's not on our roadmap yet, but It seems critical to me. cc @rauchg

If it is not on the roadmap, could you, please, guide me on how I can build a custom Next.js bundles with ReactJS-with-addons?

You have to add import 'react-addons-transition-group' to client/next.js and run gulp release.
But you'd have to fix the webpack config in next.js too.

[frol]

I have succeeded in patching Next.js, so it uses external React, ReactDOM, and ReactMD (Metarial UI toolkit)! I will try to clean my patch up and will publish it as a PR, though I am not a JS developer, so I don't expect it will get merged, but at least, it can be a starting point for someone.

[sedubois]

We're seeing the same kind of warnings due to React being included twice when using Auth0-lock: https://github.com/luisrudge/next.js-auth0/issues/3

[frol]

@sedubois You may try using the dist as a drop-in replacement for ./node_modules/next/dist from my #221 to see if that helps.

[xcadaverx]

@frol I'm getting these same errors using next.js with both react-images library and the react-photo-gallery. I've tried replacing all instances of react-md and var ReactMD in your #221 dist.tar.gz to react-photo-gallery/var ReactPG, but still receive the same error. Could be the part that referenced a link to react-md on unpkg, as i wasnt exactly sure which react-photo-gallery JS file to reference there, but went with https://github.com/neptunian/react-photo-gallery/blob/master/lib/Gallery.js.

Any help appreciated. Cheers!

[rauchg]

Agreed that we should fix this @nkzawa

[arunoda]

It's hard to manage few different types of bundles. So, I think we could add following addons bundled with Next by default.

• react-addons-css-transition-group
• react-addons-transition-group
• react-addons-create-fragment

[rauchg]

I think it should be straightforward to make them work. Just add them to dependencies, maybe extend webpack somehow and voila. I don't want to bloat next.

[arunoda]

@rauchg I agree.
I wanna find the root cause as well.
If not this should be the way. (I assume these addons doesn't bloat next)

[rauchg]

A whitelist of addons in my mind is bloatware.

[xcadaverx]

Pardon me if this is way off, I'm new to react - but isn't the issue that
there are two versions of react being loaded on the same page? (One from
next and one from the component that I'm importing...) If that's the case,
would it be possible to have next detect if another component is trying to
load react in the same dom and then block that action if so? Or would that
not fix the issue/not be possible?

Cheers,
Daniel
On Thu, Dec 15, 2016 at 4:06 PM Guillermo Rauch [e-mail]
wrote:

A whitelist of addons in my mind is bloatware.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/204#issuecomment-267481670, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ADNAs3UoFYGVX0JhL-sV1MSKtEbnq02Zks5rIdYbgaJpZM4KqMul
.

>

Daniel Williams
Sent From My iPhone.

[revolunet]

FYI this module works as a replacement for basic ReactCSSTransitionGroup stuff that doesnt work (yet) in Next.js : http://react-component.github.io/animate

[arunoda]

@rauchg I got it. I mean that's last option.
But I found the root cause and here's the fix: https://github.com/zeit/next.js/pull/401

[ajihyf]

How about using webpack DllPlugin to bundle react and other vendors?
https://github.com/webpack/docs/wiki/list-of-plugins#dllplugin

[revolunet]

thanks @arunoda 👍 ReactCSSTG works now flawlessy :)