wp.components.ServerSideRender throws an error, Gutenberg editor doesn't load

[xavortm]

Describe the bug
I am at the WordPress Contributor day in Sofia and have setup my dev environment quite a while back when everything was working great. When I opened ticket for single view edit screen and went to a single page view I saw white screen and nothing else.

Reason was error in JS:

Uncaught TypeError: Cannot set property ServerSideRender of #<Object> which has only a getter
    at Module../node_modules/@wordpress/server-side-render/build-module/index.js (index.js:50)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
redux.js:192 Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (redux.js:192)
    at promise-middleware.js:20
    at Object.dispatch (resolvers-cache-middleware.js:33)
    at _callee2$ (namespace-store.js:234)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.<computed> [as next] (runtime.js:114)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32

The error points mainly to this snippet:

if ( window && window.wp && window.wp.components ) {
	window.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {
		deprecated( 'wp.components.ServerSideRender', {
			alternative: 'wp.serverSideRender',
		} );
		return (
			<ExportedServerSideRender { ...props } ref={ ref } />
		);
	} );
}

I've setup the Gutenberg repo in the WP core dev area (src folder) and activated it. Then i changed window.wp.components.ServerSideRender to window.wp.editor.ServerSideRender and the editor loaded and was usable again.

Note - one more error shows up now: https://gist.github.com/xavortm/963ae5ad0d1fd409008b9df67000953d (kinda long). but at least it works!

To reproduce
Steps to reproduce the behavior:

1. Setup WP dev env https://github.com/WordPress/wordpress-develop
2. Install everything (node 12)
3. Run grunt for development of src and all
4. Open single post view. All white screen

Expected behavior
Working single edit view

Screenshots
Doesn't help, just white screen. (On mobile WP admin bar shows up)

Desktop (please complete the following information):

• OS: macOS
• Browser chrome, safari, firefox tested
• Version latest on all
• node version tested 9, 10, 12

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

• Please add the version of Gutenberg you are using in the description.
• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[gziolo]

@jorgefilipecosta can you investigate?

[jorgefilipecosta]

Hi @xavortm thank you for reporting this issue. @gziolo thank you for bringing this issue to my attention.

I was not able to replicate this problem on the WordPress 5.3 RC5.

I even created a test block to try the possible uses of ServerSideRender including deprecated ones

( function() {
	var ssrProps = {
		block: 'core/archives',
		attributes: {
			displayAsDropdown: true,
		}
	}
	wp.blocks.registerBlockType( 'test/server-side-render', {
		title: 'Test ServerSideRender',
		category: 'layout',
		icon: 'yes',
		edit() {
			return wp.element.createElement(
				'div',
				{},
				wp.element.createElement( wp.editor.ServerSideRender, ssrProps ),
				wp.element.createElement( wp.components.ServerSideRender, ssrProps ),
				wp.element.createElement( wp.serverSideRender, ssrProps ),
			);
		},

		save() {
			return null;
		},
	} );
}() );

And things worked as expected.

@xavortm could you confirm if you are testing WordPress 5.3 RC5 or trunk?
Could you please execute npm install after cloning/updating the repository and before executing npm run grunt build?
If you could test in a clean setup it may also be helpful.
Let me know if you are still facing the issue after the experiments, thank you in advance for helping us fix this issue!

[ergophobe]

I just updated to 5.3 on two sites.

Same error here on one site and not on another.

On the site with the error, I have all plugins deactivated, but I still get the plain white screen when attempting to add or edit a post.

There are no PHP errors and the HTML document seems to be generated fine though there are a lot of duplicate ID errors if you run it through a validator. But I get the same Javascript errors as in the original report

Uncaught TypeError: Cannot set property ServerSideRender of #<Object> which has only a getter
    at Module.369 (server-side-render.min.js:1)
    at n (server-side-render.min.js:1)
    at wp.serverSideRender.0 (server-side-render.min.js:1)
    at server-side-render.min.js:1
369 @ server-side-render.min.js:1
n @ server-side-render.min.js:1
wp.serverSideRender.0 @ server-side-render.min.js:1
(anonymous) @ server-side-render.min.js:1
data.min.js:1 Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.
    at v (data.min.js:1)
    at data.min.js:1
    at Object.dispatch (data.min.js:1)
    at data.min.js:1
    at w (data.min.js:1)
    at Generator._invoke (data.min.js:1)
    at Generator.t.<computed> [as next] (data.min.js:1)
    at n (data.min.js:1)
    at c (data.min.js:1)
    at data.min.js:1

And then many more frames.

[kairos-agency]

Hello, i just updated to 5.3 on one client site this morning and i got the same type of error. Pages are rendered but when i try to edit a page i got a blank page with this errors in console.

I solved the probleme by deactivating the YOAST SEO plugin.

[websitehelperuk]

I have exactly the same problem. No plugins installed, TwentyTwenty theme:

Uncaught TypeError: Cannot set property ServerSideRender of # which has only a getter
    at Module.369 (server-side-render.min.js:1)
    at n (server-side-render.min.js:1)
    at wp.serverSideRender.0 (server-side-render.min.js:1)
    at server-side-render.min.js:1

Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.
    at v (data.min.js:1)
    at data.min.js:1
    at Object.dispatch (data.min.js:1)
    at data.min.js:1
    at w (data.min.js:1)
    at Generator._invoke (data.min.js:1)
    at Generator.t. [as next] (data.min.js:1)
    at n (data.min.js:1)
    at c (data.min.js:1)
    at data.min.js:1

[baskettcase]

Any thoughts on this? I have 5 sites all on the same server with same configuration and only one of them is having this issue with the post-new.php page. Same exact errors as shown above.

[jorgefilipecosta]

Unfortunately, I'm not being able to replicate this problem in the testing scenarios I did. But given that @baskettcase said it happened only in one in five of the websites it may be a complex intermittent problem only happening in specific conditions.
Would it be possible to share additional details:

• The browser being used to test. Does it happen in multiple browsers?
• The language used on the websites that fail.
• Are the websites behind some kind of cache, proxy or other systems?
• Any other information or difference the failing site contains that may be helpful for replicating the problem?

[baskettcase]

• Im on Mac OS 10.14.6, Firefox Developer Edition 71.0b7, Firefox 70.0.1, Chrome 78.0.3904.97, safari 13.0.2 It all works there now. It was Firefox Developer Edition that it worked on all sites except one. These are not clean installs either, these are all existing sites.
• English on all sites
• They are all behind Sucuri and all use W3 Cache. The one site that was not working, I disabled all plugins and it still did not work. I then did the "fix" that was mentioned above, changing components to editor and then flushed Sucuri's cache and it then worked for me and some of my clients now. I then reverted the change and it stayed working for me. I am also not getting the error any longer in the console.
• I just talked to the client and they are on Windows 10 Pro, Version 1903, OS Build 18362.476 and in Chrome 78.0.3904.97 it does not work, but the one that is using Firefox it does work on the same OS.

I can run my client through the browser console to see if they are showing errors there for those that it is not working for. If you would like me to, then please let me know.

[websitehelperuk]

It’s not easy to pin point the problem, everyone else’s fix did not work for me. I eventually found the problem and in my case it was Cloudflare’s orgin certificate config. All Is fine now.

[ergophobe]

Interestingly, the offending site updated just fine to 5.3.1 and so did the other three sites that updated with no problem to 5.3.0.

[andrastudio]

@websitehelperuk can you tell us what config did you change in Cloudflare origin certificate?

I have the same issue as well, the issue still exist even when all plugins removed and using unedited TwentyTwenty theme. The issue only happens on one site of about 10 sites hosted on the same vps server.

Reinstalling and downgrading the core to previous version also didn't work.

[chrisdebruine]

I tried following the suggested fixes, they arent working for me... so far i only have 1 site with this problem. tries multple browsers. sof ar no luck!

[hayatbiralem]

I turned on Disable Gutenberg Editor setting of the WPBakery Page Builder and then my problem solved but if you need the Gutenber editor it couldn't help you. Sorry :(

[hayatbiralem]

If you don't need the Gutenber Editor, maybe you can install the Classic Editor plugin?

[chrisdebruine]

Hi, in my case this was caused by an error in the server config and SSL certificate which was not pointing to the correct domainname. I host my server through cloudways after contacting the support they fixed the issue. It is an error that happend multiple times when switching domainnames. And have to make them aware of the issues and where the possible fix could be...

[hayatbiralem]

I turned on Disable Gutenberg Editor setting of the WPBakery Page Builder and then my problem solved but if you need the Gutenber editor it couldn't help you. Sorry :(

This solve my issue temporarily so it is not an option anymore.

I have to use dns-01 authorization on RunCloud and it works fine now.

This comment helped me.

[youknowriad]

Going to close this issue as it seems more of a server config issue than a Gutenberg one.

[xavortm]

Just a reminder for the close here that originally I got this issue on the WP contributor's day on a localhost setup following the guidelines in order to contribute. This was not done on a production server or anything of the sort, it was pretty much out of the box dev environment. For some reason, other folks around me did not reproduce it.

I am not posting this with a request for a followup, just a clarification after the "close"