Chart block example doesn't show a chart

[bobbingwide]

I can't find any evidence to prove it but I'm sure that the example used to work.
It doesn't work with the latest build of the code (v0.4.0 ), nor does it work with the version released to wordpress.org

[bobbingwide]

Changing the block registration so that the dependencies for the editor script includes chartjs-script resolved this issue.

PS. 2021/10/04 - No it didn't. Read on.

[bobbingwide]

Interesting, with v0.4.0 the example works on oik-plugins.co.uk but not oik-plugins.com or herbmiller.me
No idea why not. Time to investigate.

Site	version	Works?	Gutenberg
oik-plugins.co.uk	0.4.0	Yes	11.0.0
oik-plugins.com	0.4.0	No	11.4.1
herbmiller.me	0.4.0	No
cwiccer.com	0.3.0	No
cwiccer.com	0.4.0	No
top-10-wp-plugins.com	0.3.0	Yes
top-10-wp-plugins.com	0.4.0	Yes
bobbingwide.com	0.4.0	Yes
blocks.wp-a2z.org	0.3.0	No
s.b/cwiccer	0.4.0	No	11.5.1
s.b/cwiccer	0.4.0	Yes	Inactive
s.b/wordpress	0.4.0	No	11.5.1
s.b/wordpress	0.4.0	Yes	Inactive
s.b/oikcom	0.4.0	Yes

It appears to be related to the version of Gutenberg that's activated.

Got this from oik-options > plugins in cwiccer.com when getting ready to update sb-chart-block

Notice: Trying to access array offset on value of type null in /home/customer/www/cwiccer.com/public_html/wp-content/plugins/oik/libs/oik_plugins.php on line 290

[bobbingwide]

It works up to Gutenberg 11.3.0
It doesn't work on Gutenberg 11.4.0 and above to 11.6.0 - the latest version.

[bobbingwide]

To analyse the problem I tried to build the latest version of Gutenberg.
I failed miserably... but this should be raised as another issue.

I couldn't get the latest version of the Gutenberg source to build.
I can't get it to install its updates using npm ci.
The debug log shows a number of 404s.
It ends like this.

2568 warn old lockfile HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/block-serialization-default-parser - Not found
2568 warn old lockfile     at C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\npm-registry-fetch\check-response.js:95:15
2568 warn old lockfile     at runMicrotasks (<anonymous>)
2568 warn old lockfile     at processTicksAndRejections (internal/process/task_queues.js:95:5)
2568 warn old lockfile     at async Array.<anonymous> (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:717:9)
2568 warn old lockfile  Could not fetch metadata for block-serialization-default-parser@4.2.1 HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/block-serialization-default-parser - Not found
2568 warn old lockfile     at C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\npm-registry-fetch\check-response.js:95:15
2568 warn old lockfile     at runMicrotasks (<anonymous>)
2568 warn old lockfile     at processTicksAndRejections (internal/process/task_queues.js:95:5)
2568 warn old lockfile     at async Array.<anonymous> (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:717:9) {
2568 warn old lockfile   headers: [Object: null prototype] {
2568 warn old lockfile     date: [ 'Mon, 04 Oct 2021 11:01:27 GMT' ],
2568 warn old lockfile     'content-type': [ 'application/json' ],
2568 warn old lockfile     'content-length': [ '21' ],
2568 warn old lockfile     connection: [ 'keep-alive' ],
2568 warn old lockfile     'cf-ray': [ '698de98a3ab35415-LHR' ],
2568 warn old lockfile     vary: [ 'Accept-Encoding' ],
2568 warn old lockfile     'expect-ct': [
2568 warn old lockfile       'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"'
2568 warn old lockfile     ],
2568 warn old lockfile     server: [ 'cloudflare' ],
2568 warn old lockfile     'x-fetch-attempts': [ '1' ],
2568 warn old lockfile     'x-local-cache-status': [ 'skip' ]
2568 warn old lockfile   },
2568 warn old lockfile   statusCode: 404,
2568 warn old lockfile   code: 'E404',
2568 warn old lockfile   method: 'GET',
2568 warn old lockfile   uri: 'https://registry.npmjs.org/block-serialization-default-parser',
2568 warn old lockfile   body: { error: 'Not found' },
2568 warn old lockfile   pkgid: 'block-serialization-default-parser@4.2.1'
2568 warn old lockfile }
2569 silly inflate packages/date
2570 timing idealTree Completed in 13760ms
2571 timing command:ci Completed in 18246ms
2572 verbose stack Error: Tracker "idealTree:inflate:" already exists
2572 verbose stack     at Arborist.[_onError] (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\tracker.js:107:11)
2572 verbose stack     at Arborist.addTracker (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\tracker.js:31:21)
2572 verbose stack     at Array.<anonymous> (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:716:14)
2572 verbose stack     at run (C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\promise-call-limit\index.js:30:26)
2572 verbose stack     at C:\Users\herb\AppData\Roaming\npm\node_modules\npm\node_modules\promise-call-limit\index.js:33:7
2572 verbose stack     at runMicrotasks (<anonymous>)
2572 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:95:5)
2573 verbose cwd C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg-source
2574 verbose Windows_NT 10.0.19043
2575 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\herb\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "ci"
2576 verbose node v14.17.0
2577 verbose npm  v7.24.0
2578 error Tracker "idealTree:inflate:" already exists
2579 verbose exit 1

Another problem is that rimraf isn't a recognised command.

[bobbingwide]

I asked on the #core-editor channel and was pointed to a dev note https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/

I know which line of code isn't working. It's in the runChart() method of the SB_chart_block class.

var ctx = document.getElementById( attributes.myChartId );

When in the iframe, which is used for example, template editor and site editor, the given element can't be found;
ctx is null / undefined.

I didn't understand the useEffect() hook when I wrote it and don't understand the dev note about using useRef().
But more help is being offered so I expect a working solution soon.
I also believe I'll have to learn what React Hooks are; which means watching an hour and a half long video.
https://reactjs.org/docs/hooks-intro.html

[bobbingwide]

I've got it working again using a technique suggested by @getdave.
This uses useRef() to obtain a reference which is used in the <chart> tag.
It's also passed on the call to runChart()
The chart's context ( ctx ) is obtained from

var ctx = chartRef.current;

which replaces

var ctx = document.getElementById( attributes.myChartId );

I now need to retest the behaviour in

• FSE - Site Editor
• Template editor
• Block widget editor

[bobbingwide]

Delivered in v0.4.1