React 16 RC #10294

Closed
bvaughn opened this Issue Jul 26, 2017 · 254 comments

Comments

Projects
None yet
@bvaughn
Contributor

bvaughn commented Jul 26, 2017

The third React 16 RC is now available for public testing. 🎉

Installation Instructions

The RC has been published to NPM with the tag "next". Regular NPM installs will continue to use the 15.6 release. To install the RC use:

yarn add react@next react-dom@next

Or:

npm install --save react@next react-dom@next

What Does React 16 Mean for You?

React 16 is the first release that ships with a rewrite of the React core (previously codenamed “Fiber”). This rewrite had a few goals:

  • Remove old internal abstractions that didn’t age well and hindered internal changes.
  • Let us ship some of the most requested features like returning arrays from render, recovering from component errors, and readable component stack traces for every error.
  • Enable us to start experimenting with asynchronous rendering of components for better perceived performance.

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x. We don’t expect React 16.0 to make your apps significantly faster or slower, but we’d love to know if you see improvements or regressions.

JavaScript Environment Requirements

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg <IE11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

A polyfilled environment for React 16 using core-js to support older browsers might look like:

import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React also depends on requestAnimationFrame (even in test environments). A simple shim for testing environments would be:

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

Points of Interest

  • This is a complete rewrite of React but we expect it to work with your existing code. If you fixed all deprecation warnings introduced in 15.x, the 16 beta should work for you.
  • Third party libraries that relied on deprecated or unsupported APIs may need updates to work correctly with this new release. Now is a good time to file issues against libraries that have problems. (And tell us if we broke something!)
  • We are particularly interested in hearing about performance differences you notice between 15.x and 16.x. We don't expect any massive changes but would love to know about improvements or regressions. Please report them here!
  • The server renderer has been completely rewritten, and now offers a streaming mode (ReactDOMServer.renderToNodeStream() and ReactDOMServer.renderToStaticNodeStream()). Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. And there is no data-reactid anymore! This server renderer code is still very new, so it is likely to have issues. Please report them.
  • Hydrating a server rendered container now has an explicit API. Use ReactDOM.hydrate instead of ReactDOM.render if you're reviving server rendered HTML. Keep using ReactDOM.render if you're just doing client-side rendering.
  • React Native follows a different release cycle and will update to the beta in a future release. (It's already using an alpha release but not yet using Fiber.)

Breaking Changes

Error Handling

  • Previously, runtime errors used to put React into a broken state and produce cryptic errors. React 16 fixes this by introducing a special kind of components called “error boundaries”. Error boundaries can catch runtime errors in a component tree, log them, and display a fallback UI instead.
  • If there is an uncaught error in a component, and there is no error boundary up in the tree, the whole component tree will be unmounted. This helps avoid very nasty bugs where the UI has been corrupted due to an error, but it means that you need to add a few error boundaries to your app to handle the errors gracefully.
  • React 15 had a very limited undocumented support for error boundaries with a different method name. It used to be called unstable_handleError, but has been renamed to componentDidCatch.

You can learn more about the new error handling behavior here.

Scheduling and Lifecycle

  • ReactDOM.render() and ReactDOM.unstable_renderIntoContainer() now return null if called from inside a lifecycle method.
  • setState:
    • Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
    • Calling setState directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.
    • setState callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.
  • When replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount. Previously, A.componentWillUnmount could fire first in some cases.
  • Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
  • It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using ReactDOM.unmountComponentAtNode. See this example.
  • componentDidUpdate lifecycle no longer receives prevContext param. (See #8631)
  • Shallow renderer no longer calls componentDidUpdate() because DOM refs are not available. This also makes it consistent with componentDidMount() (which does not get called in previous versions either).
  • Shallow renderer does not implement unstable_batchedUpdates() anymore.

Packaging

  • There is no react/lib/* and react-dom/lib/* anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in this issue, and we’ll try to figure out a migration strategy for you.
  • There is no react-with-addons.js build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
  • The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See 15.5.0 and 15.6.0 blog posts for instructions on migrating code and automated codemods.
  • The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
    • react/dist/react.jsreact/umd/react.development.js
    • react/dist/react.min.jsreact/umd/react.production.min.js
    • react-dom/dist/react-dom.jsreact-dom/umd/react-dom.development.js
    • react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js

Known Issues

  • The server renderer crashes in production with inline styles. (#10299, fixed by #10300)
    • Fixed in 16.0.0-beta.2
  • The server renderer doesn't yet support returning arrays and strings from components.
    • Fixed in 16.0.0-beta.3
  • The server renderer still renders data-reactid somewhat unnecessarily. (#10306)
    • Fixed in 16.0.0-beta.3
  • Shallow renderer doesn’t pass context to componentWillReceiveProps (to be fixed by #10342)
    • Fixed in 16.0.0-beta.3
  • There is an issue with 'use strict' in older browsers (#10294 (comment))
    • Fixed in 16.0.0-beta.3
  • In some cases Error: null is reported instead of the real error. (#10321)
    • Fixed in 16.0.0-beta.3
  • There is a report that Google crawler can’t render the page using 16 (link).
    • Fixed in 16.0.0-beta.3
  • Some popular third party libraries won’t work yet (e.g. Enzyme).
  • (Please report more issues in this thread.)

Updates

  • Released 16.0.0-beta.1 on July 24, 2017

  • Released 16.0.0-beta.2 on July 27, 2017

    • Fix a crash in server rendering.
  • Released 16.0.0-beta.3 on August 3, 2017

    • Fix strict-mode function scope problem (#10361)
    • Better error log messaging and cross-origin handling (#10353, #10373)
    • Shallow renderer improvements (#10372, #10342)
    • Edge-case context bugfix (#10334)
    • Single point of entry for server rendering (#10362)
    • etc.
  • Released 16.0.0-beta.4 on August 8, 2017

    • Warn about unresolved function as a child. #10376
    • Remove data-reactid and data-react-checksum from whitelist. #10402
    • New test renderer API features (disabled via feature flag, for now). #10377
    • And some other minor updates to slightly reduce bundle size.
  • Release 16.0.0-beta.5 on 2017-08-08

    • Fix bugs related to unmounting error boundaries #10403
    • Enable new fiber ReactTestRenderer API methods; (previously disabled behind a feature flag) #10410
  • Released 16.0.0-rc.1 on September 6, 2017

  • Released 16.0.0-rc.2 on September 6, 2017

    • Fix bug where React npm packages would throw an exception on startup in browsers not supporting const natively (@sophiebits in #10631)
  • Released 16.0.0-rc.3 on September 14, 2017

    • Report bad dead code elimination to React DevTools (@gaearon in #10702)
    • Fix false positive warning when hydrating SVG after SSR (@gaearon in #10676)
    • Add a warning about non-lowercase custom attributes (@gaearon in #10699)
    • Fix a memory leak (@gaearon in #10680)
    • Remove deprecated entry point for the shallow renderer (@gaearon in #10682)
    • Remove undocumented TestUtils methods (@gaearon in #10681)
    • Add ReactDOM.createPortal() as an “official” API without the unstable prefix (@gaearon in #10675)
    • Don’t repeat Object.assign polyfill twice (@gaearon in #10671)
@dmitrif

This comment has been minimized.

Show comment Hide comment
@dmitrif

dmitrif Jul 26, 2017

In regards to:

There is no react/lib/* and react-dom/lib/* anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files ("flat bundles"). If you previously relied on undocumented React internals, and they don't work anymore, let us know about your specific case in this issue, and we'll try to figure out a migration strategy for you.

We have been relying on https://github.com/electrode-io/electrode-react-ssr-caching which monkey-patches the React render. Any suggestions as to how to make it work with v16?

Used imports:

const ReactCompositeComponent = require("react-dom/lib/ReactCompositeComponent");
const DOMPropertyOperations = require("react-dom/lib/DOMPropertyOperations");

Thank you.

dmitrif commented Jul 26, 2017

In regards to:

There is no react/lib/* and react-dom/lib/* anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files ("flat bundles"). If you previously relied on undocumented React internals, and they don't work anymore, let us know about your specific case in this issue, and we'll try to figure out a migration strategy for you.

We have been relying on https://github.com/electrode-io/electrode-react-ssr-caching which monkey-patches the React render. Any suggestions as to how to make it work with v16?

Used imports:

const ReactCompositeComponent = require("react-dom/lib/ReactCompositeComponent");
const DOMPropertyOperations = require("react-dom/lib/DOMPropertyOperations");

Thank you.

@aweary

This comment has been minimized.

Show comment Hide comment
@aweary

aweary Jul 26, 2017

Member

Maybe @aickin can comment on the feasibility of integrating a caching solution directly into the server renderer?

Member

aweary commented Jul 26, 2017

Maybe @aickin can comment on the feasibility of integrating a caching solution directly into the server renderer?

@verkholantsev

This comment has been minimized.

Show comment Hide comment
@verkholantsev

verkholantsev Jul 26, 2017

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x.

Is there any way to manually enable asynchronous rendering in this beta?

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x.

Is there any way to manually enable asynchronous rendering in this beta?

@TrySound

This comment has been minimized.

Show comment Hide comment
@TrySound

TrySound Jul 26, 2017

Contributor

@verkholantsev Afaik there is an option. Or will be.

Contributor

TrySound commented Jul 26, 2017

@verkholantsev Afaik there is an option. Or will be.

@verkholantsev

This comment has been minimized.

Show comment Hide comment
@verkholantsev

verkholantsev Jul 26, 2017

@TrySound Could you tell more about this option? Or could you tell me in what direction should I start my research about it?

@TrySound Could you tell more about this option? Or could you tell me in what direction should I start my research about it?

@bvaughn

This comment has been minimized.

Show comment Hide comment
@bvaughn

bvaughn Jul 26, 2017

Contributor

@verkholantsev We'll provide info about enabling async once we think it's ready for testing. We're still experimenting on it internally.

Contributor

bvaughn commented Jul 26, 2017

@verkholantsev We'll provide info about enabling async once we think it's ready for testing. We're still experimenting on it internally.

@bclinkinbeard bclinkinbeard referenced this issue in idyll-lang/idyll Jul 26, 2017

Closed

v2 Roadmap #114

10 of 14 tasks complete

@ravikiran438 ravikiran438 referenced this issue in zeit/next.js Jul 26, 2017

Closed

Start testing Fiber #1098

@sergeysova

This comment has been minimized.

Show comment Hide comment
@sergeysova

sergeysova Jul 26, 2017

Can I import SynteticEvent from flat bundle?

Can I import SynteticEvent from flat bundle?

@clarkbw clarkbw referenced this issue in devtools-html/devtools-core Jul 26, 2017

Closed

[WIP] Trying out react@next #525

@kadikraman

This comment has been minimized.

Show comment Hide comment
@kadikraman

kadikraman Jul 26, 2017

This might be interesting: just tried it in our codebase. Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works! 🎉

kadikraman commented Jul 26, 2017

This might be interesting: just tried it in our codebase. Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works! 🎉

@gaearon

This comment has been minimized.

Show comment Hide comment
@gaearon

gaearon Jul 26, 2017

Member

Can I import SynteticEvent from flat bundle?

Not currently. What is your use case for it?

Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works!

We’ll need more details to tell if something is wrong. I’d appreciate if you could provide a reproducing project (even if it only fails with Yarn).

Member

gaearon commented Jul 26, 2017

Can I import SynteticEvent from flat bundle?

Not currently. What is your use case for it?

Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works!

We’ll need more details to tell if something is wrong. I’d appreciate if you could provide a reproducing project (even if it only fails with Yarn).

@sergeysova

This comment has been minimized.

Show comment Hide comment
@sergeysova

sergeysova Jul 26, 2017

@gaearon

Not currently. What is your use case for it?

Ex.: I want to pass change event to parent when toggle button.
Or I want to modify event before pass to parent.

// pseudocode
onClickItem(event) {
  const newEvent = new SynteticEvent('change', { id: this.state.currentId })
  this.props.onChange(newEvent)
}

sergeysova commented Jul 26, 2017

@gaearon

Not currently. What is your use case for it?

Ex.: I want to pass change event to parent when toggle button.
Or I want to modify event before pass to parent.

// pseudocode
onClickItem(event) {
  const newEvent = new SynteticEvent('change', { id: this.state.currentId })
  this.props.onChange(newEvent)
}
@mbifulco

This comment has been minimized.

Show comment Hide comment
@mbifulco

mbifulco Jul 26, 2017

So far, everything runs smoothly save for my test cases of rendered components, because they depend on:

import { mount, shallow } from 'enzyme';

which results in dependency errors like this:

react-dom is an implicit dependency in order to support react@0.13-14. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

So far, everything runs smoothly save for my test cases of rendered components, because they depend on:

import { mount, shallow } from 'enzyme';

which results in dependency errors like this:

react-dom is an implicit dependency in order to support react@0.13-14. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

@tomasztomys

This comment has been minimized.

Show comment Hide comment
@muhammedMoussa

This comment has been minimized.

Show comment Hide comment
@muhammedMoussa

muhammedMoussa Jul 26, 2017

when react enable me to call API with any built in package like $http in angular, without force me to use staff like superagent or axios ..

when react enable me to call API with any built in package like $http in angular, without force me to use staff like superagent or axios ..

@markerikson

This comment has been minimized.

Show comment Hide comment
@markerikson

markerikson Jul 26, 2017

@muhammedMoussa : that is not a goal for React, and React will not be shipping a built-in HTTP client library.

@muhammedMoussa : that is not a goal for React, and React will not be shipping a built-in HTTP client library.

@gaearon

This comment has been minimized.

Show comment Hide comment
@gaearon

gaearon Jul 26, 2017

Member

Let’s keep this discussion focused on 16 Beta. Thanks.

Member

gaearon commented Jul 26, 2017

Let’s keep this discussion focused on 16 Beta. Thanks.

@mridgway

This comment has been minimized.

Show comment Hide comment
@mridgway

mridgway Jul 26, 2017

Contributor

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

Contributor

mridgway commented Jul 26, 2017

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

@gaearon

This comment has been minimized.

Show comment Hide comment
@gaearon

gaearon Jul 26, 2017

Member

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

I think it’s React.createClass, React.PropTypes, React.__spread, React.createMixin, and React.DOM.*. There are a few changes to entry points too (e.g. shallow renderer is now react-test-renderer/shallow, and test utils moved to react-dom/test-utils). I believe they all are mentioned in these blog posts:

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

This is sort of up in the air right now. I think we’ll make a decision before shipping next beta.

Member

gaearon commented Jul 26, 2017

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

I think it’s React.createClass, React.PropTypes, React.__spread, React.createMixin, and React.DOM.*. There are a few changes to entry points too (e.g. shallow renderer is now react-test-renderer/shallow, and test utils moved to react-dom/test-utils). I believe they all are mentioned in these blog posts:

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

This is sort of up in the air right now. I think we’ll make a decision before shipping next beta.

@wmertens

This comment has been minimized.

Show comment Hide comment
@wmertens

wmertens Jul 26, 2017

Contributor

Do the flat builds not interfere with scope hoisting by the app bundlers? Just wondering, not sure if there is much to gain from that. I presume the bundler would have to figure out statically that there are parts of React that are not used by the app and can be removed, probably a very tall order.

Contributor

wmertens commented Jul 26, 2017

Do the flat builds not interfere with scope hoisting by the app bundlers? Just wondering, not sure if there is much to gain from that. I presume the bundler would have to figure out statically that there are parts of React that are not used by the app and can be removed, probably a very tall order.

@timdorr

This comment has been minimized.

Show comment Hide comment
@timdorr

timdorr Jul 27, 2017

@wmertens The flat bundle is scope hoisted itself. You can continue to hoist it yourself. It's basically just concatenating the modules into one file and ensuring no variable name overlaps. That's fully compatible with any bundler above it.

timdorr commented Jul 27, 2017

@wmertens The flat bundle is scope hoisted itself. You can continue to hoist it yourself. It's basically just concatenating the modules into one file and ensuring no variable name overlaps. That's fully compatible with any bundler above it.

@aweary

This comment has been minimized.

Show comment Hide comment
@aweary

aweary Jul 27, 2017

Member

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

For what it's worth, Enzyme will be supporting React 16 just like previous releases. There's a huge refactor underway which includes support for React 16.

Member

aweary commented Jul 27, 2017

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

For what it's worth, Enzyme will be supporting React 16 just like previous releases. There's a huge refactor underway which includes support for React 16.

@neurosnap

This comment has been minimized.

Show comment Hide comment
@neurosnap

neurosnap Jul 27, 2017

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

@7rulnik

This comment has been minimized.

Show comment Hide comment
@7rulnik

7rulnik Jul 27, 2017

Seems that react-dom/server doesn't work correctly with style in production mode . In dev all works fine.

const React = require('react')
const ReactServer = require('react-dom/server')
const foo1 = React.createElement("div", {
  className: "sign-link",
  id: "sign-layout-link",
  style: { position: 'absolute' }
});

ReactServer.renderToString(foo1)
TypeError: re is not a function
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:7774
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/fbjs/lib/memoizeStringOnly.js:23:32
    at f (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:2423)
    at b (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:3163)
    at e.renderDOM (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:9665)
    at e.render (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8762)
    at e.read (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8452)
    at Object.T [as renderToString] (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:4384)
    at repl:1:13
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)

7rulnik commented Jul 27, 2017

Seems that react-dom/server doesn't work correctly with style in production mode . In dev all works fine.

const React = require('react')
const ReactServer = require('react-dom/server')
const foo1 = React.createElement("div", {
  className: "sign-link",
  id: "sign-layout-link",
  style: { position: 'absolute' }
});

ReactServer.renderToString(foo1)
TypeError: re is not a function
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:7774
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/fbjs/lib/memoizeStringOnly.js:23:32
    at f (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:2423)
    at b (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:3163)
    at e.renderDOM (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:9665)
    at e.render (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8762)
    at e.read (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8452)
    at Object.T [as renderToString] (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:4384)
    at repl:1:13
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)
@falconmick

This comment has been minimized.

Show comment Hide comment
@falconmick

falconmick Jul 27, 2017

The server renderer doesn't yet support returning arrays and strings from components.

Does this mean doesn't support them at all? or just as the root component i.e. ssr(<somecom /<<otherComp /<)?

This could be really bad if it does break it as array returns are life, but so is SSR

falconmick commented Jul 27, 2017

The server renderer doesn't yet support returning arrays and strings from components.

Does this mean doesn't support them at all? or just as the root component i.e. ssr(<somecom /<<otherComp /<)?

This could be really bad if it does break it as array returns are life, but so is SSR

@bvaughn

This comment has been minimized.

Show comment Hide comment
@bvaughn

bvaughn Jul 27, 2017

Contributor

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

Flarnie and I spoke with Leland about Enzyme this afternoon. Seems like it's in a good spot to be 16-compatible by or before the 16.0 release and we'll be staying in touch about it during the beta.

Contributor

bvaughn commented Jul 27, 2017

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

Flarnie and I spoke with Leland about Enzyme this afternoon. Seems like it's in a good spot to be 16-compatible by or before the 16.0 release and we'll be staying in touch about it during the beta.

@Daniel15

This comment has been minimized.

Show comment Hide comment
@Daniel15

Daniel15 Jul 27, 2017

Member

The server renderer has been completely rewritten, and now offers a streaming mode

Is the streaming mode specific to Node.js (ie. does it use APIs only available in Node), or could it work in other environments too (for example, for people using ReactJS.NET, react-rails or React in Java)?

Member

Daniel15 commented Jul 27, 2017

The server renderer has been completely rewritten, and now offers a streaming mode

Is the streaming mode specific to Node.js (ie. does it use APIs only available in Node), or could it work in other environments too (for example, for people using ReactJS.NET, react-rails or React in Java)?

@twobit twobit referenced this issue in lavrton/react-konva Jul 27, 2017

Closed

Not compatible with new version of React (15.4.0) #44

@jlongster

This comment has been minimized.

Show comment Hide comment
@jlongster

jlongster Jul 27, 2017

Contributor

This is an error I hit in a moderately sized app.

screen shot 2017-07-26 at 11 12 53 pm

It points to this code:

screen shot 2017-07-26 at 11 13 27 pm

If I open the Object.renderPortal frame it looks like it's in the react-modal library, these lines exactly.

At the very top of that file is does const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer; so this is an unstable API. I can look more into this tomorrow because it very well might be a false positive. I did update both react and react-dom to 16.0.0-beta.1.

I will look more into this tomorrow and see if I can provide more details.

Great work y'all! ❤️

Contributor

jlongster commented Jul 27, 2017

This is an error I hit in a moderately sized app.

screen shot 2017-07-26 at 11 12 53 pm

It points to this code:

screen shot 2017-07-26 at 11 13 27 pm

If I open the Object.renderPortal frame it looks like it's in the react-modal library, these lines exactly.

At the very top of that file is does const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer; so this is an unstable API. I can look more into this tomorrow because it very well might be a false positive. I did update both react and react-dom to 16.0.0-beta.1.

I will look more into this tomorrow and see if I can provide more details.

Great work y'all! ❤️

@sophiebits

This comment has been minimized.

Show comment Hide comment
@sophiebits

sophiebits Jul 27, 2017

Member

@jlongster The code in your screenshot isn't 16 beta 1, but some of the stack frames you cited are. You must have two copies of react-dom, one new and one old. npm ls might help you find why.

Member

sophiebits commented Jul 27, 2017

@jlongster The code in your screenshot isn't 16 beta 1, but some of the stack frames you cited are. You must have two copies of react-dom, one new and one old. npm ls might help you find why.

@jlongster

This comment has been minimized.

Show comment Hide comment
@jlongster

jlongster Jul 27, 2017

Contributor

Ah ok, thanks! I will check tomorrow, not at my computer anymore

Contributor

jlongster commented Jul 27, 2017

Ah ok, thanks! I will check tomorrow, not at my computer anymore

@miksansegundo miksansegundo referenced this issue in glenjamin/skin-deep Jul 27, 2017

Closed

Support for React 16 beta #91

@renchap renchap referenced this issue in ianstormtaylor/slate Sep 24, 2017

Merged

Upgrade to React 16 #1178

@azu azu referenced this issue in almin/almin Sep 25, 2017

Open

Almin: Can use native Map? #290

@scott-ad-riley scott-ad-riley referenced this issue in CodeYourFuture/syllabus Sep 26, 2017

Merged

React lesson 1 #132

@gaearon

This comment has been minimized.

Show comment Hide comment
Member

gaearon commented Sep 26, 2017

@gaearon gaearon closed this Sep 26, 2017

@emilyrohrbough emilyrohrbough referenced this issue in cerner/terra-core Sep 26, 2017

Closed

React 16 upgrade #658

1 of 4 tasks complete
@yasserkaddour

This comment has been minimized.

Show comment Hide comment
@yasserkaddour

yasserkaddour Sep 26, 2017

Congrats on the release !!
Just so you know http://isfiberreadyyet.com/ is linking to this page instead of the release notes.

yasserkaddour commented Sep 26, 2017

Congrats on the release !!
Just so you know http://isfiberreadyyet.com/ is linking to this page instead of the release notes.

@paulocesarpcfj

This comment has been minimized.

Show comment Hide comment
@paulocesarpcfj

paulocesarpcfj Sep 26, 2017

Enzyme still not working yet? I've tried use npm i --save-dev enzyme enzyme-adapter-react-16 but nothing changed.

Enzyme still not working yet? I've tried use npm i --save-dev enzyme enzyme-adapter-react-16 but nothing changed.

@bvaughn

This comment has been minimized.

Show comment Hide comment
@bvaughn

bvaughn Sep 26, 2017

Contributor

@paulocesarpcfj Enzyme 3 was released last night with support for React 16. If it's not working, file an issue with details against the Enzyme project.

Contributor

bvaughn commented Sep 26, 2017

@paulocesarpcfj Enzyme 3 was released last night with support for React 16. If it's not working, file an issue with details against the Enzyme project.

bvaughn added a commit that referenced this issue Sep 27, 2017

Merge changes from master into Gatsby branch (#10853)
* Update changelog for unreleased 16.0 changes (#10730)

* First shot at updating changelog for 16.0

**what is the change?:**
Added an 'unreleased' section to the changelog with info from #10294

**why make this change?:**
To get things set for the 16.0 release.

**test plan:**
Visual inspection

**issue:**
#8854

* Fix typos and formatting errors in changelog

* Add requestAnimationFrame and remove "New helpful warnings"

**what is the change?:**
In response to helpful code review -
- Add mention of dependency on `requestAnimationFrame` and need to
  polyfill that as well as `Map` and `Set`
- Remove "New helpful warnings" section; it was incomplete, and there
  are so many new and updated warnings that it might not be reasonable
  to cover them in the changelog.

**why make this change?:**
Accuracy

**test plan:**
Visual inspection

**issue:**
issue #8854

* Improve wording

* Improve wording and fix missing links

* Add backticks to file names & code; wording tweak

* Break "Major Changes" into "New Feature" and "Breaking Changes"

* Add server side render changes to 16.0 changelog

* Change gist link from mine to gaearons

* Add note about returning fragments

* fix misc nits

* Misc. formatting/wording fixes to changelog

**what is the change?:**
Thanks to the kind code review comments of @gaearon and @nhunzaker we
have
- removed the non-deterministic bold styling on some bullet points
- improved wording of the bullet points for portals, attribute whitelist
  changes, and server rendering changes
- Add note about error boundaries including a breaking change to error
  handling behavior.
- punctuation and capitalization fixes

**why make this change?:**
Clarity and correctness

**test plan:**
Visual inspection

**issue:**
#8854

* fix broken link

* Fixes #9667: Updated createTextInstance to create the text node on correct document (#10723)

* Record sizes

*  Add a changelog for elements having the same key (#10811)

*  Add a changelog for elements having the same key

* Reword

* Markdown fixs on "DOM Attributes in React 16" post (#10816)

* Include tag name into the table snapshot (#10818)

* Update DOM warning wording and link (#10819)

* Update DOM warning wording and link

* Consistently use "Invalid" for known misspellings

* Update license headers BSD+Patents -> MIT

Did find and replace in TextMate.

```
find: (?:( \*)( ))?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+(?:this source tree|the same directory)\.$
replace: $1$2Copyright (c) $3-present, Facebook, Inc.\n$1\n$1$2This source code is licensed under the MIT license found in the\n$1$2LICENSE file in the root directory of this source tree.
```

* Change license and remove references to PATENTS

Only remaining references:

```
docs/_posts/2014-10-28-react-v0.12.md
51:You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.

docs/_posts/2015-04-17-react-native-v0.4.md
20:* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).

src/__mocks__/vendor/third_party/WebComponents.js
8: * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
```

* Version bumps to use MIT license

* Add ReactTestRenderer documentations (#10692)

* Add ReactTestRenderer documentations

* Add TestRenderer documentations

* TestRenderer is not experiment

* Add a link for jsdom

* Use ES Modules syntax

* Twaek

* Add a Link component

* Use Jest assertions

* Move a documentation for createNodeMock to Idea section

* Renamed

* Tweak

* Rename

* More explicit

* Add a usecase for createNodeMock

* Add changelog for 15.6.2

* Add 15.6.2 blog post to master

* Add Nate to authors on master

* Bump object-assign patch range to match main package.json

* Flow should ignore node_modules/create-react-class

* Update error codes

* Update CHANGELOG for React 16

* v16.0.0

* Doc updates for React 16 + blog post (#10824)

* Doc updates for React 16 + blog post

* Add link to Sophie's post

* Fix React links on the website (#10837)

* Fix React links on the website

* Fix code editor

* Fix code editor, attempt 2

* Doc change for prevContext removal in CDU (#10836)

* Doc change for prevContext removal in CDU

Ref: #8631

* Minor rewording

* Fix note formatting

* React.createPortal is not a function (#10843)

* Update Portals Documentation (#10840)

* Update Portals Documentation

Correct some grammar to be more explicit and clear. Update example CodePen to better match code found in documentation. Update code example styles to match other code examples (ie. 'State and Lifecycle', 'Handling Events').

* Clean up comment to be accurate to example

There was a small comment overlooked when reviewing the documentation. This fixes it to be accurate to the example as well as grammatically correct.

* Update portals.md

* More fixes

* Update name of property initializer proposal (#10812)

The proposal for property initializers is called [Public Class Fields](https://tc39.github.io/proposal-class-public-fields/) now (part of the combined [Class Fields](https://github.com/tc39/proposal-class-fields) proposal).

* Fix portal link (#10845)

* Update docs for React 16 (#10846)

* Minor doc edit

* Rename urls

@emilyrohrbough emilyrohrbough referenced this issue in cerner/terra-clinical Sep 27, 2017

Closed

React 16 upgrade #161

1 of 4 tasks complete

@sorrycc sorrycc referenced this issue in sorrycc/blog Oct 1, 2017

Open

早报汇总 @ 2017.9 #50

@gaearon gaearon referenced this issue Oct 4, 2017

Open

React 16 Spillover #11088

5 of 16 tasks complete

@paranoidjk paranoidjk referenced this issue in react-component/notification Oct 9, 2017

Closed

component does not work with React 16 #21

@baseten baseten referenced this issue in gatsbyjs/gatsby Oct 20, 2017

Closed

Gatsby and React 16.0.0 #2550

@beretboat beretboat referenced this issue in ptmt/react-native-macos Oct 27, 2017

Closed

Any plan to merge react-native newer version? #180

@Plash-jindal

This comment has been minimized.

Show comment Hide comment
@Plash-jindal

Plash-jindal Nov 3, 2017

I have update the react and react-dom packages but after I run the project using webpack-dev-server, I get this error,
ERROR in Entry module not found: Error: Cannot resolve module 'react/lib/ReactComponentBrowserEnvironment'

I have update the react and react-dom packages but after I run the project using webpack-dev-server, I get this error,
ERROR in Entry module not found: Error: Cannot resolve module 'react/lib/ReactComponentBrowserEnvironment'

@gaearon

This comment has been minimized.

Show comment Hide comment
@gaearon

gaearon Nov 3, 2017

Member

Search for that string in node_modules. Some library is using an internal React module. As mentioned in release notes in this issue, this has never been supported and will no longer work.

I am locking this issue because RC has been released a long time ago, and is no longer relevant. If you have a problem please file a new issue.

Member

gaearon commented Nov 3, 2017

Search for that string in node_modules. Some library is using an internal React module. As mentioned in release notes in this issue, this has never been supported and will no longer work.

I am locking this issue because RC has been released a long time ago, and is no longer relevant. If you have a problem please file a new issue.

@gaearon gaearon locked and limited conversation to collaborators Nov 3, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.