-
Notifications
You must be signed in to change notification settings - Fork 27.1k
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
TransitionGroup addon causes "Only a ReactOwner can have refs" #204
Comments
This seems to be the issue in react-addons-transition-group package handling: facebook/react#7874 |
Inspecting the HTML response from Next.js server, I see that ReactJS gets bundled inside the |
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:
/cc @nkzawa |
Actually, we are considering if should do this. |
@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? |
Unfortunately, it's not on our roadmap yet, but It seems critical to me. cc @rauchg
You have to add |
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. |
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 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 Any help appreciated. Cheers! |
Agreed that we should fix this @nkzawa |
It's hard to manage few different types of bundles. So, I think we could add following addons bundled with Next by default.
|
I think it should be straightforward to make them work. Just add them to |
@rauchg I agree. |
A whitelist of addons in my mind is bloatware. |
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 ***@***.***> 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
<#204 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ADNAs3UoFYGVX0JhL-sV1MSKtEbnq02Zks5rIdYbgaJpZM4KqMul>
.
--
Daniel Williams
Sent From My iPhone.
|
FYI this module works as a replacement for basic ReactCSSTransitionGroup stuff that doesnt work (yet) in Next.js : http://react-component.github.io/animate |
React addons require React in a special way. That causes Webpack to push React into the app's bundle. This fix adds new externals entries to prevent that.
How about using webpack DllPlugin to bundle react and other vendors? |
thanks @arunoda 👍 ReactCSSTG works now flawlessy :) |
This is a very early version of the next-dev test runner. I'm opening this early to get thoughts from folks re: the direction of the design and implementation. Fixes #204 Currently it: * Discovers integration test fixtures from the filesystem. Right now these are expected to be single files that get bundled and will eventually include assertions. This is powered by the test-generator crate, which allows us not to have to manually enumerate each case. We could consider using this for the node-file-trace tests as well. * Starts the dev server on a free port and opens a headless browser to its root. The browser control is implemented with the https://crates.io/crates/chromiumoxide crate, which expects Chrome or Chromium to already be available. Eventually it will: * [x] Implement a minimal test environment loaded in the browser so that assertions can be run there from bundled code. * [x] Report back the results of these assertions to rust, where we can pass/fail cargo tests with those results. In the future it could: * Possibly include snapshot-style tests to assert on transformed results. This could be in the form of fixture directories instead of files cc @jridgewell * Support expressing special configuration of turbopack in a fixture, possibly as another file in the fixture directory. * [x] ~Possibly support distributing tests to a pool of open browsers instead of opening and closing for each test.~ Test Plan: See next PRs
With a help of @mlaursen (mlaursen/react-md#150), I minimized the reproduction of the bug we encounter in #119 and #196.
Here is the
pages/index.js
:Once you open the page, you will get the following in your browser console:
If I drop the
TransitionGroup
component, the page works fine.Does anyone have a clue of what is the cause of this issue?
The text was updated successfully, but these errors were encountered: