"Unsafe lifecycle methods" error in console #7897

iandunn · 2018-07-11T16:25:48Z

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

To Reproduce

Open the browser console
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

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

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

iandunn · 2018-09-13T21:48:31Z

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)

designsimply · 2018-09-21T23:17:48Z

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

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 01bb2f2 (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

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.

iandunn · 2018-09-22T00:15:14Z

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

mcsf · 2018-10-09T15:39:56Z

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

markfinst · 2018-10-23T09:47:15Z

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

elliotcondon · 2018-11-15T23:44:50Z

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?

ellatrix · 2018-11-27T08:29:40Z

It seems that this is being tracked in #11360.

erkanrua · 2019-01-17T06:50:10Z

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

To Reproduce

Open the browser console
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

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.

designsimply · 2019-01-17T19:02:53Z

@erkanrua thank you for the screenshot! There is an open issue for this at #11360 and I will mark this one as a duplicate to indicate to work from the other issue for this case.

eklingen88 · 2019-09-04T14:31:22Z

@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.

mahnunchik · 2019-11-12T20:12:24Z

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

iandunn added [Type] Bug An existing feature does not function as intended [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Code Quality Issues or PRs that relate to code quality labels Jul 11, 2018

ajitbohra self-assigned this Jul 11, 2018

coreymcollins mentioned this issue Oct 5, 2018

Feature/#64 gutenberg 3.9.0 fixes WebDevStudios/wds-blocks#72

Merged

2 tasks

Soean mentioned this issue Oct 8, 2018

Getting console error #10399

Closed

ajitbohra removed their assignment Nov 18, 2018

ellatrix closed this as completed Nov 27, 2018

designsimply mentioned this issue Dec 19, 2018

Lifecycle methd warning #13006

Closed

designsimply added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Jan 17, 2019

iandunn mentioned this issue Mar 15, 2019

Add Sessions and Sponsor blocks, and required shared components WordPress/wordcamp.org#33

Closed

2 tasks

iandunn mentioned this issue Apr 12, 2019

The editor has encountered an unexpected error (Invariant Violation: Minified React error #130) #9909

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Unsafe lifecycle methods" error in console #7897

"Unsafe lifecycle methods" error in console #7897

iandunn commented Jul 11, 2018

iandunn commented Sep 13, 2018

designsimply commented Sep 21, 2018

iandunn commented Sep 22, 2018

mcsf commented Oct 9, 2018

markfinst commented Oct 23, 2018

elliotcondon commented Nov 15, 2018

ellatrix commented Nov 27, 2018

erkanrua commented Jan 17, 2019

designsimply commented Jan 17, 2019

eklingen88 commented Sep 4, 2019 •

edited

Loading

mahnunchik commented Nov 12, 2019

"Unsafe lifecycle methods" error in console #7897

"Unsafe lifecycle methods" error in console #7897

Comments

iandunn commented Jul 11, 2018

iandunn commented Sep 13, 2018

designsimply commented Sep 21, 2018

iandunn commented Sep 22, 2018

mcsf commented Oct 9, 2018

markfinst commented Oct 23, 2018

elliotcondon commented Nov 15, 2018

ellatrix commented Nov 27, 2018

erkanrua commented Jan 17, 2019

designsimply commented Jan 17, 2019

eklingen88 commented Sep 4, 2019 • edited Loading

mahnunchik commented Nov 12, 2019

eklingen88 commented Sep 4, 2019 •

edited

Loading