search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

"Unsafe lifecycle methods" error in console #7897

Closed iandunn closed 5 years ago

iandunn commented 6 years ago

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:

iandunn commented 6 years ago

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 commented 6 years ago

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

iandunn commented 6 years ago

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

mcsf commented 6 years ago

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 commented 5 years ago

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

elliotcondon commented 5 years ago

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 commented 5 years ago

It seems that this is being tracked in #11360.

erkanrua commented 5 years ago

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.

designsimply commented 5 years ago

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

eklingen88 commented 5 years ago

@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 commented 4 years ago

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