Gutenberg: "Unsafe lifecycle methods" error in console

Created on 11 Jul 2018  路  11Comments  路  Source: WordPress/gutenberg

I'm seeing an error in the console all the time.

To Reproduce

  1. Open the browser console
  2. Open Gutenberg

It seems to be coming from Gutenberg itself, there aren't any plugins activated.

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in Unknown (created by WithSelect(Component))
    in WithSelect(Component)

componentWillUpdate: Please update the following components to use componentDidUpdate instead: t

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings react-dom.24169eaf.js:526:7

printWarning
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:526:7
warning
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:550:7
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings/<
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:10659:9
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:10636:5
commitAllLifeCycles
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16024:5
callCallback
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:140:9
invokeGuardedCallbackDev
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:178:7
invokeGuardedCallback
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:227:5
commitRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16181:7
completeRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17196:34
performWorkOnRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17141:9
performWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17060:7
performSyncWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17032:3
requestWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16932:5
scheduleWork$1
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16796:11
enqueueSetState
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:11877:5
Component.prototype.setState
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react.832d746b.js:524:3
value/this.unsubscribe<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:51322
ht/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48082
ht
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48052
dt/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48544
p
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:43390
e/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:49476
w
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36632
_/i._invoke</<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36422
S/</t[e]
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36808
r
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:31895
r/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:31995
u
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:28228
M/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:28350
f
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:26740

screen shot 2018-07-11 at 9 14 50 am

Expected behavior

There shouldn't be any errors or warnings in the console.

Desktop:

  • OS X 10.13.5
  • Firefox Developer Edition 62.0b6
  • Gutenberg master @ e697f72
[Priority] Low [Status] Duplicate [Type] Bug [Type] Code Quality
Source
picture iandunn
👍5

Most helpful comment

Hi all.

These "Warning: Unsafe lifecycle methods were found within a strict-mode tree:" are becoming ever increasingly frustrating. Debugging plugin development is not easy when the console log is filled with hundreds of JS errors on page load.

Is this fixable?

picture elliotcondon on 16 Nov 2018
👍21

All 11 comments

I'm also seeing several like this when I click on the Publish button:

Warning: React does not recognize the `postType` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `posttype` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by t)
    in t (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(t)
    in div
    in Unknown (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithViewportMatch(Component) (created by NavigateRegions(WithViewportMatch(Component)))
    in div (created by NavigateRegions(WithViewportMatch(Component)))
    in NavigateRegions(WithViewportMatch(Component)) (created by r)
    in r (created by RemountOnPropChange(r))
    in RemountOnPropChange(r)
    in Unknown (created by WithDispatch(NavigateRegions(WithViewportMatch(Component))))
    in WithDispatch(NavigateRegions(WithViewportMatch(Component))) (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Component))))
    in t
    in t (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by r)
    in r (created by RemountOnPropChange(r))
    in RemountOnPropChange(r)
    in Unknown (created by WithDispatch(t))
    in WithDispatch(t)
    in Unknown (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(Component) react-dom.24169eaf.js:526:7
printWarning
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:526:7
warning
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:550:7
validateProperty$1
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:7682:7
warnUnknownProperties
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:7716:19
validateProperties$2
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:7736:3
validatePropertiesInDevelopment
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:7787:5
setInitialProperties$1
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:8013:5
finalizeInitialChildren
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:9104:3
completeWork
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:14686:17
completeUnitOfWork
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16291:18
performUnitOfWork
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16468:12
workLoop
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16480:24
renderRoot
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16520:7
performWorkOnRoot
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17138:22
performWork
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17060:7
performSyncWork
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17032:3
interactiveUpdates$1
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17297:7
interactiveUpdates
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:2326:10
dispatchInteractiveEvent
http://plugins.test/content/plugins/gutenberg/vendor/react-dom.24169eaf.js:4882:3


Warning: React does not recognize the `hasPublishAction` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haspublishaction` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by t)
    in t (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(t)
    in div
    in Unknown (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithViewportMatch(Component) (created by NavigateRegions(WithViewportMatch(Component)))
    in div (created by NavigateRegions(WithViewportMatch(Component)))
    in NavigateRegions(WithViewportMatch(Component)) (created by r)
    in r (created by RemountOnPropChange(r))
    in RemountOnPropChange(r)
    in Unknown (created by WithDispatch(NavigateRegions(WithViewportMatch(Component))))
    in WithDispatch(NavigateRegions(WithViewportMatch(Component))) (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Component))))
    in t
    in t (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by r)
    in r (created by RemountOnPropChange(r))
    in RemountOnPropChange(r)
    in Unknown (created by WithDispatch(t))
    in WithDispatch(t)
    in Unknown (created by n)
    in n (created by RemountOnPropChange(n))
    in RemountOnPropChange(n)
    in WithSelect(Component)
iandunn picture iandunn on 13 Sep 2018

This was also reported in #core-testing on WordPress Slack at https://wordpress.slack.com/archives/C03B0H5J0/p1537513585000100 (props manooweb) with the following screenshot:

image

I think this is coming from React.StrictMode which was enabled in dev mode in #7202 to avoid using deprecated APIs in Core and plugins. I could only see similar warnings in the console after adding define( 'SCRIPT_DEBUG', true ); to my wp-config.php and restarting the local web server. I tested using WordPress 4.9.8 and Gutenberg 01bb2f2a1 (4.0-pre-release).

When loading a new post I see:

react-dom.24169eaf.js:526 Warning: Unsafe lifecycle methods were found within a strict-mode tree:
in Editor (created by _class)
in _class (created by RemountOnPropChange(_class))
in RemountOnPropChange(_class)
in WithSelect(Editor)

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Fill

screen shot 2018-09-21 at 5 14 42 pm

When publishing a post I see:

react-dom.24169eaf.js:526 Warning: React does not recognize the postType prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase posttype instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the hasPublishAction prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase haspublishaction instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the isPublished prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase ispublished instead. If you accidentally passed it from a parent component, remove it from the DOM element.
react-dom.24169eaf.js:526 Warning: React does not recognize the isSaving prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase issaving instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the isDirty prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isdirty instead. If you accidentally passed it from a parent component, remove it from the DOM element.

screen shot 2018-09-21 at 5 14 19 pm

designsimply picture designsimply on 22 Sep 2018
👍1

I have SCRIPT_DEBUG enabled in most of my test environments, so that sounds right.

iandunn picture iandunn on 22 Sep 2018

Leaving this reference here, as it can be useful as a recommendation for block authors:

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

mcsf picture mcsf on 9 Oct 2018

What's the "official" recommendation for handling this warning? Just ignore it? Or set SCRIPT_DEBUG to false while developing?

markfinst picture markfinst on 23 Oct 2018

Hi all.

These "Warning: Unsafe lifecycle methods were found within a strict-mode tree:" are becoming ever increasingly frustrating. Debugging plugin development is not easy when the console log is filled with hundreds of JS errors on page load.

Is this fixable?

elliotcondon picture elliotcondon on 16 Nov 2018
👍21

It seems that this is being tracked in #11360.

ellatrix picture ellatrix on 27 Nov 2018

I'm seeing an error in the console all the time.

To Reproduce

  1. Open the browser console
  2. Open Gutenberg

It seems to be coming from Gutenberg itself, there aren't any plugins activated.

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in Unknown (created by WithSelect(Component))
    in WithSelect(Component)

componentWillUpdate: Please update the following components to use componentDidUpdate instead: t

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings react-dom.24169eaf.js:526:7

printWarning
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:526:7
warning
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:550:7
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings/<
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:10659:9
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:10636:5
commitAllLifeCycles
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16024:5
callCallback
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:140:9
invokeGuardedCallbackDev
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:178:7
invokeGuardedCallback
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:227:5
commitRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16181:7
completeRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17196:34
performWorkOnRoot
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17141:9
performWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17060:7
performSyncWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:17032:3
requestWork
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16932:5
scheduleWork$1
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16796:11
enqueueSetState
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:11877:5
Component.prototype.setState
http://wp-develop.test/wp-content/plugins/gutenberg/vendor/react.832d746b.js:524:3
value/this.unsubscribe<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:51322
ht/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48082
ht
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48052
dt/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:48544
p
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:43390
e/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:49476
w
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36632
_/i._invoke</<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36422
S/</t[e]
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:36808
r
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:31895
r/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:31995
u
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:28228
M/<
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:28350
f
http://wp-develop.test/wp-content/plugins/gutenberg/build/data/index.js:1:26740

screen shot 2018-07-11 at 9 14 50 am

Expected behavior

There shouldn't be any errors or warnings in the console.

Desktop:

  • OS X 10.13.5
  • Firefox Developer Edition 62.0b6
  • Gutenberg master @ e697f72

I have similar error but how can i fixed, i didn't see.

erkanrua picture erkanrua on 17 Jan 2019

@erkanrua thank you for the screenshot! There is an open issue for this at https://github.com/WordPress/gutenberg/issues/11360 and I will mark this one as a duplicate to indicate to work from the other issue for this case.

designsimply picture designsimply on 17 Jan 2019

@markfinst

What's the "official" recommendation for handling this warning? Just ignore it? Or set SCRIPT_DEBUG to false while developing?

If you're in Chrome, right click the warning in your console and select the "Hide messages from react-dom.js" option. That'll add a URL filter to the console that keeps those pesky warnings out.

eklingen88 picture eklingen88 on 4 Sep 2019
👍1

The message Warning: Unsafe lifecycle methods were found within a strict-mode tree: is still appear.

mahnunchik picture mahnunchik on 12 Nov 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jasmussen picture jasmussen  路  3Comments
JohnPixle picture JohnPixle  路  3Comments
hedgefield picture hedgefield  路  3Comments
maddisondesigns picture maddisondesigns  路  3Comments
aaronjorbin picture aaronjorbin  路  3Comments