React-select: I am getting the following errors when using react-select

Created on 5 May 2020  路  8Comments  路  Source: JedWatson/react-select

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: MenuPlacer

Learn more about this warning here: https://fb.me/react-legacy-context
in MenuPlacer (created by Select)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by SelectContainer)
in SelectContainer (created by Select)
in Select (created by StateManager)
in StateManager (at AddProperties.js:565)
in form (created by Form)
in Form (at AddProperties.js:288)
in div (created by Col)
in Col (at AddProperties.js:286)
in div (created by Row)
in Row (at AddProperties.js:284)
in div (at AddProperties.js:283)
in AddProperties (created by Context.Consumer)
in Route (at App.js:37)
in Switch (at App.js:31)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:29)
in App (at src/index.js:8)
in StrictMode (at src/index.js:7)
console. @ 0.chunk.js:58844
r @ react_devtools_backend.js:6
printWarning @ 0.chunk.js:32655
error @ 0.chunk.js:32627
(anonymous) @ 0.chunk.js:44039
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushLegacyContextWarning @ 0.chunk.js:44026
flushRenderPhaseStrictModeWarningsInDEV @ 0.chunk.js:55527
commitRootImpl @ 0.chunk.js:54824
unstable_runWithPriority @ 0.chunk.js:67231
runWithPriority$1 @ 0.chunk.js:43642
commitRoot @ 0.chunk.js:54809
finishSyncRender @ 0.chunk.js:54226
performSyncWorkOnRoot @ 0.chunk.js:54212
(anonymous) @ 0.chunk.js:43696
unstable_runWithPriority @ 0.chunk.js:67231
runWithPriority$1 @ 0.chunk.js:43642
flushSyncCallbackQueueImpl @ 0.chunk.js:43691
flushSyncCallbackQueue @ 0.chunk.js:43679
discreteUpdates$1 @ 0.chunk.js:54315
discreteUpdates @ 0.chunk.js:33377
dispatchDiscreteEvent @ 0.chunk.js:36776
0.chunk.js:58844 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of NodeResolver which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by MenuList)
in MenuList (created by MenuPlacer)
in ScrollBlock (created by MenuPlacer)
in NodeResolver (created by ScrollCaptor)
in ScrollCaptor (created by ScrollCaptorSwitch)
in ScrollCaptorSwitch (created by MenuPlacer)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by Menu)
in Menu (created by MenuPlacer)
in MenuPlacer (created by Select)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by SelectContainer)
in SelectContainer (created by Select)
in Select (created by StateManager)
in StateManager (at AddProperties.js:565)
in form (created by Form)
in Form (at AddProperties.js:288)
in div (created by Col)
in Col (at AddProperties.js:286)
in div (created by Row)
in Row (at AddProperties.js:284)
in div (at AddProperties.js:283)
in AddProperties (created by Context.Consumer)
in Route (at App.js:37)
in Switch (at App.js:31)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:29)
in App (at src/index.js:8)
in StrictMode (at src/index.js:7)

issubug-unconfirmed

Most helpful comment

I'm also getting this error, among others. Is there an updated branch we should be using?

Here are the other two errors I'm seeing in the console.

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: AutosizeInput, Select
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of NodeResolver which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by MenuList)
    in MenuList (created by MenuPlacer)
    in ScrollBlock (created by MenuPlacer)
    in NodeResolver (created by ScrollCaptor)
    in ScrollCaptor (created by ScrollCaptorSwitch)
    in ScrollCaptorSwitch (created by MenuPlacer)
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by Menu)
    in Menu (created by MenuPlacer)
    in MenuPlacer (created by Select)
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by SelectContainer)
    in SelectContainer (created by Select)
    in Select (created by StateManager)
    in StateManager (at NewHorse.js:150)
    in div (at NewHorse.js:134)
    in form (created by Form)
    in Form (at NewHorse.js:116)
    in NewHorse (at App.js:110)
    in Route (at PrivateRoute.js:8)
    in PrivateRoute (at App.js:110)
    in Switch (at App.js:107)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:106)
    in header (at App.js:86)
    in div (at App.js:85)
    in App (at src/index.js:10)
    in StrictMode (at src/index.js:9)

All in all though thank you very much for react-select. It's really well done and easy to use - just looking for a way to reduce warnings. :)

All 8 comments

I'm also getting this error, among others. Is there an updated branch we should be using?

Here are the other two errors I'm seeing in the console.

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: AutosizeInput, Select
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of NodeResolver which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by MenuList)
    in MenuList (created by MenuPlacer)
    in ScrollBlock (created by MenuPlacer)
    in NodeResolver (created by ScrollCaptor)
    in ScrollCaptor (created by ScrollCaptorSwitch)
    in ScrollCaptorSwitch (created by MenuPlacer)
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by Menu)
    in Menu (created by MenuPlacer)
    in MenuPlacer (created by Select)
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by SelectContainer)
    in SelectContainer (created by Select)
    in Select (created by StateManager)
    in StateManager (at NewHorse.js:150)
    in div (at NewHorse.js:134)
    in form (created by Form)
    in Form (at NewHorse.js:116)
    in NewHorse (at App.js:110)
    in Route (at PrivateRoute.js:8)
    in PrivateRoute (at App.js:110)
    in Switch (at App.js:107)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:106)
    in header (at App.js:86)
    in div (at App.js:85)
    in App (at src/index.js:10)
    in StrictMode (at src/index.js:9)

All in all though thank you very much for react-select. It's really well done and easy to use - just looking for a way to reduce warnings. :)

I am too having these error messages!

I concur...

I'm having the same problem.
Any solution guys?

That's not an error, it's a deprecation warning. It just means something about this code will stop working in React 17. The maintainers will need to make an update if they want it to work with React 17 but it shouldn't affect the functioning of the library for now.

It should be a warning, but it's printed as an error by React.

Screen Shot 2020-05-29 at 7 07 57 AM

I'm getting the same warning/error. Hopefully, an update can be released soon.

Hi all,

I'm closing this in favor of #3703 which logs the same issue so we can consolidate this and get it fixed.

If this is incorrect, please let me know.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

batusai513 picture batusai513  路  3Comments

coder-guy22296 picture coder-guy22296  路  3Comments

x-yuri picture x-yuri  路  3Comments

yrabinov picture yrabinov  路  3Comments

ericj17 picture ericj17  路  3Comments