Block registration fails

[jasalt]

Trying to move some basic demo code I wrote to main htmxpress project's demo.php and a new template file into a block using this as starting point. Having some trouble getting this demo block properly registered/activated so that I could insert it in block editor.

Setup

Testing on Mac wp-env (Docker Desktop) and VVV on Debian with same results.

cd htmxpress-serverside-block
npm install
npm run build
wp-env start

Installing htmxpress plugin in wp-env container:

wp-env run cli bash
cd /var/www/html/wp-content/plugins
wget https://github.com/svandragt/htmxpress/archive/refs/heads/main.zip
unzip main.zip
mv htmxpress-main htmxpress
rm main.zip
wp plugin activate htmxpress

Changed permalink settings on wp-admin from default "Plain" value to be sure, related to svandragt/htmxpress#10.

Testing

When opening the block editor for creating a new page, the block is not visible in block selector and wp.blocks.getBlockTypes(); Javascript console command does not return it either. Javascript console gives following warnings:

The "save" property must be a valid function. blocks.js:9806:10
processBlockType http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:9806
__experimentalRegisterBlockType http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:9883
createThunkMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1679
createMiddleware Redux
promiseMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1576
createResolversCacheMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1670
createBoundAction http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:2545
registerBlockType http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:6929
809 http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1
t http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1
n http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1
O http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1
<anonymous> http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1
<anonymous> http://localhost:8888/wp-content/plugins/htmxpress-serverside-block/build/index.js?ver=2e31912e9a1ceb648b2f:1

The "save" property must be a valid function. blocks.js:9806:10
processBlockType http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:9806
processedBlockTypes http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:9917
__experimentalReapplyBlockTypeFilters http://localhost:8888/wp-includes/js/dist/blocks.js?ver=5f23cda55814f981387d:9916
createThunkMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1679
createMiddleware Redux
promiseMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1576
createResolversCacheMiddleware http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:1670
createBoundAction http://localhost:8888/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:2545
initializeEditor http://localhost:8888/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:10031
_wpLoadBlockEditor http://localhost:8888/wp-admin/post-new.php?post_type=page:2116

Managed to work this around by looking at the docs at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save and changing the line

htmxpress-serverside-block/src/index.js

Line 33 in 78664dc

save: null

to:

save: ({ attributes }) => {
	return <div> { attributes.content } </div>;
}

Then after building with npm run build the Htmx Server Block gets properly loaded/registered in block editor and I'm able to add it to the page. It does not work interactively in block editor though, but ok on the rendered page. Understanding maybe 25% of the block editor logic that is going on there so needs to be reviewed. There are also some warnings in block editor page Javascript console after inserting the block but the rendered page does not show them:

Warning: The tag <nothing> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: React does not recognize the `urlQueryArgs` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `urlqueryargs` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the `EmptyResponsePlaceholder` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `emptyresponseplaceholder` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[jasalt]

Commenting this line gets rid of the previous warnings and I didn't notice any side effects.

https://github.com/svandragt/htmxpress-serverside-block/blob/78664dc203b866a941f8c87d3b38afb7ef437d2a/src/edit.js#L37C5-L37C5