React 16 support #866

adidahiya · 2017-03-21T16:36:33Z

Preemptively creating an umbrella issue for this task, like ant-design/ant-design#5377.

Related React issues / deprecations:

We should try to support both v15 and v16 in a single Blueprint version (maintaining multiple compatible releases will be cumbersome).

Sub-tasks:

migrate to react-transition-group
remove usage of proptypes (Deprecation warning with React 15.5 #991)
use ReactDOM.createPortal instead of ReactDOM.unstable_renderSubtreeIntoContainer ([Portal] Switch from unstable_renderSubtreeIntoContainer() to unstable_createPortal() for compatibility with React Fiber #1509)

The text was updated successfully, but these errors were encountered:

giladgray · 2017-04-19T21:03:16Z

i'll investigate the react 16 upgrade after #991 (updating to 15.5 and resolving deprecation warnings)

luisatmaniak · 2017-09-26T19:36:55Z

Will blueprint 1.x ever be compatible with React 16?

L42y · 2017-09-27T02:31:55Z

I guess unstable_createPortal should be ReactDOM.createPortal now: https://facebook.github.io/react/docs/portals.html

awjreynolds · 2017-10-02T10:35:08Z

React 16 support has been sign posted for milestone v2.0.0

Given the 26 open issues on v2.0.0 this implies a very long wait for this. No criticism just an observation. Would it be useful to create a v2.0.0 release that only includes the fixes needed for React 16 and move the other 25 issues to v3.0.0?

I realise that is a pain, but I suspect a lot of package maintainers are going to get similar requests. Your work is awesome. Massively appreciate the quality of the framework.

adidahiya · 2017-10-02T15:55:45Z

@awjreynolds we'll try to make a release of blueprint that's compatible with React 16 before we do all the feature work in the 2.0 milestone. So we might make a release that supports 0.14.x, 15.x, and 16.x all at once on the 1.x track. Or it might be blueprint core 2.0 as you suggested, and the other features/breaking changes come in 3.0. We're looking into this in the next couple weeks.

giladgray · 2017-10-04T00:25:38Z

working on React 16 support... easy to add a peerDependency alongside 15 but I'm wondering how we want to go about ensuring support through automated tests? do we want to run the test suite against react 16 also or instead of 15 or not at all (save for 2.0)?

but wait, some serious gotchas:

currently we run our unit suite against react 15.x using enzyme 2.x.
we must migrate to enzyme 3.x for react 16 support.
enzyme 3.x was released last week, and @types/enzyme has not yet been updated 😢.

adidahiya · 2017-10-04T17:34:29Z

ensuring support through automated tests

Yes, ideally we should run tests against both versions of React that we support. A good way to do this is with multiple containers in CircleCI. Look at the tslint repo as an example -- we run tests with multiple versions of Node and tsc.

we must migrate to enzyme 3.x for react 16 support

For now, we could compile against Enzyme 2.x types. Is there some subset of the test suite that doesn't use enzyme which we could run in the container where React 16 is installed? I'd really like to optimize for speed here and get a version of Blueprint out that at least doesn't generate peer dependency warnings with React 16, even if we have to say that official support (with Enzyme 3.x running our tests) is coming later (doesn't necessarily have to be the next major version, just whenever we finish migrating the tests).

marekdlugos · 2017-12-01T20:52:32Z

Sorry guys, would you be that kind to just explain a person who is just starting with React (me) how to solve this issue?

I can't get rid off those 2 lines:

npm WARN [email protected] requires a peer of react@^15.0.0 || ^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^15.4.2 but none was installed.

I have already tried

but it was not working for me.

adidahiya · 2017-12-01T21:24:15Z

@marekdlugos see #201 (comment). you can safely ignore those warnings

mayaah · 2018-02-09T04:12:34Z

Hi, I'm trying to use a MultiSelect but keep getting '@blueprintjs/core' does not contain an export named 'MultiSelect' errors. I tried to update to v2 but every time I install Blueprint similar to @marekdlugos above, I get the same errors:

npm WARN [email protected] requires a peer of react@^15.0.0 || ^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^15.4.2 but none was installed.

And I also tried the recommended commands if you see UNMET PEER DEPENDENCY errors too.

Just wondering what I can do since I really want to use this MultiSelect haha. Thank you!

giladgray · 2018-02-09T04:35:46Z

@mayaah a few things:

if you're using React 16, you gotta be on Blueprint 2.0 👌
MultiSelect lives in the 2.0 select package, not in core 📦
pure-render-decorator dependency has been removed in 2.0 React 16 and Enzyme 3 migration #1885 🙅‍♂️

hope that helps 😄

adidahiya · 2018-02-09T17:20:19Z

if you're using React 16, you gotta be on Blueprint 2.0

this is not strictly true. react 16 works with the latest 1.x packages.

shravan2x · 2018-02-21T17:47:01Z

@adidahiya Does the new 1.x package depend on react-transition-group? I get a Uncaught Error: Cannot find module "react-transition-group/CSSTransitionGroup" if I don't have it installed.

EDIT: It doesn't accept the latest react-transition-group ^2.2.1 either - only an older 1.1.2.

giladgray · 2018-02-21T18:07:49Z

@shravan2x the 1.x packages do not depend on r-t-g (they still use react-addons-css-transition-group) so if you're seeing that dependency then you must be bringing in a 2.0 package somehow.

Are you perhaps using [email protected]? That one depends on core 2.0; downgrade to 0.14.

shravan2x · 2018-02-21T18:14:29Z

@giladgray I'm not using labs or any other 2.0 package that I know of. These are the ones I'm using:

"@blueprintjs/core": "^1.35.4",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-free-solid": "^5.0.6",
"@fortawesome/react-fontawesome": "0.0.17",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"better-npm-run": "^0.1.0",
"classnames": "^2.2.5",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.2.0",
"css-loader": "^0.28.7",
"debug": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"path": "^0.12.7",
"postcss-loader": "^2.0.8",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-transition-group": "^1.1.2",
"redux": "^3.7.2",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1"

giladgray · 2018-02-21T18:17:40Z

Hmm then you shouldn't need that r-t-g dependency at all as you already have the add-ons one. Have you tried removing it?

shravan2x · 2018-02-21T18:33:46Z

This is what happens when I do:

Uncaught Error: Cannot find module "react-transition-group/CSSTransitionGroup"
    at webpackMissingModule (index.js:10)
    at Object.__webpack_exports__.b (index.js:10)
    at __webpack_require__ (bootstrap 3799b691625e1c110800:19)
    at Object.<anonymous> (index.js:8)
    at __webpack_require__ (bootstrap 3799b691625e1c110800:19)
    at Object.<anonymous> (props.js:45)
    at __webpack_require__ (bootstrap 3799b691625e1c110800:19)
    at Object.__webpack_exports__.a (contextMenu.js:1)
    at __webpack_require__ (bootstrap 3799b691625e1c110800:19)
    at Object.defineProperty.value (tetherUtils.js:71)
webpackMissingModule @ index.js:10
__webpack_exports__.b @ index.js:10
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ index.js:8
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ props.js:45
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
__webpack_exports__.a @ contextMenu.js:1
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
Object.defineProperty.value @ tetherUtils.js:71
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ app.3799b691625e1c110800.js:2728
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ HeaderContainer.jsx:6
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
Object.defineProperty.value @ index.js:1
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ AppContainer.jsx:8
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
Object.defineProperty.value @ index.js:1
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ main.jsx:9
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ app.3799b691625e1c110800.js:10173
__webpack_require__ @ bootstrap 3799b691625e1c110800:19
(anonymous) @ bootstrap 3799b691625e1c110800:62
(anonymous) @ bootstrap 3799b691625e1c110800:62

It mentions HeaderContainer.jsx:6, which is:

import { Button, Intent, Navbar, NavbarDivider, NavbarGroup, NavbarHeading } from '@blueprintjs/core';

adidahiya · 2018-02-21T18:42:31Z

@shravan2x please open a new issue if you need support, this is getting out of scope.

adidahiya added P1 Type: task labels Mar 21, 2017

giladgray added this to the 1.16.0 milestone Apr 19, 2017

giladgray self-assigned this Apr 19, 2017

giladgray modified the milestones: 1.16.0, 1.17.0 Apr 27, 2017

llorca modified the milestones: 1.17.0, 1.18.0 May 12, 2017

tgreenwatts modified the milestones: 1.18.0, 2.x May 16, 2017

adidahiya unassigned giladgray Aug 28, 2017

giladgray mentioned this issue Aug 28, 2017

[Portal] Switch from unstable_renderSubtreeIntoContainer() to unstable_createPortal() for compatibility with React Fiber #1509

Closed

llorca modified the milestones: 2.x, 2.0.0 Sep 18, 2017

llorca added the Type: breaking change label Sep 27, 2017

llorca mentioned this issue Sep 27, 2017

React 16 #1628

Closed

adidahiya removed this from the 2.0.0 milestone Oct 2, 2017

giladgray self-assigned this Oct 4, 2017

giladgray modified the milestone: 1.30.0 Oct 4, 2017

This was referenced Oct 4, 2017

run test suite against both React 15 & 16 #1659

Closed

allow React 16 in core peerDependencies #1660

Merged

giladgray closed this as completed in #1660 Oct 4, 2017

adidahiya mentioned this issue Oct 20, 2017

document peer dependencies during npm install #201

Closed

adidahiya mentioned this issue Dec 11, 2017

React 16 and Enzyme 3 migration #1885

Merged

giladgray added this to the 2.0.0 milestone Dec 11, 2017

palantir locked as off-topic and limited conversation to collaborators Feb 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 16 support #866

React 16 support #866

adidahiya commented Mar 21, 2017 •

edited

Loading

giladgray commented Apr 19, 2017

luisatmaniak commented Sep 26, 2017

L42y commented Sep 27, 2017

awjreynolds commented Oct 2, 2017

adidahiya commented Oct 2, 2017

giladgray commented Oct 4, 2017

adidahiya commented Oct 4, 2017 •

edited

Loading

marekdlugos commented Dec 1, 2017 •

edited

Loading

adidahiya commented Dec 1, 2017

mayaah commented Feb 9, 2018

giladgray commented Feb 9, 2018

adidahiya commented Feb 9, 2018

shravan2x commented Feb 21, 2018 •

edited

Loading

giladgray commented Feb 21, 2018

shravan2x commented Feb 21, 2018

giladgray commented Feb 21, 2018

shravan2x commented Feb 21, 2018 •

edited

Loading

adidahiya commented Feb 21, 2018

React 16 support #866

React 16 support #866

Comments

adidahiya commented Mar 21, 2017 • edited Loading

giladgray commented Apr 19, 2017

luisatmaniak commented Sep 26, 2017

L42y commented Sep 27, 2017

awjreynolds commented Oct 2, 2017

adidahiya commented Oct 2, 2017

giladgray commented Oct 4, 2017

adidahiya commented Oct 4, 2017 • edited Loading

marekdlugos commented Dec 1, 2017 • edited Loading

adidahiya commented Dec 1, 2017

mayaah commented Feb 9, 2018

giladgray commented Feb 9, 2018

adidahiya commented Feb 9, 2018

shravan2x commented Feb 21, 2018 • edited Loading

giladgray commented Feb 21, 2018

shravan2x commented Feb 21, 2018

giladgray commented Feb 21, 2018

shravan2x commented Feb 21, 2018 • edited Loading

adidahiya commented Feb 21, 2018

adidahiya commented Mar 21, 2017 •

edited

Loading

adidahiya commented Oct 4, 2017 •

edited

Loading

marekdlugos commented Dec 1, 2017 •

edited

Loading

shravan2x commented Feb 21, 2018 •

edited

Loading

shravan2x commented Feb 21, 2018 •

edited

Loading