Cannot set property parentNode of #<Node> which has only a getter

[oeyoews]

Cannot set property parentNode of #<Node> which has only a getter

In most cases, this problem is caused by the fakedom of tiddlywiki. I have encountered the same problem several times before. The general reason is that the virtual dom created by the widget appears in an abnormal place, such as the Sidebar Title. The previous solution was Use window.document instead of fakedom.

I ran into this problem again today with cm6 widget, I tried using window.document instead of `this.widget.document.createElement('div'), but it still didn't work. so I will temporarily add a try catch for this cm6 widget.

In the CM6 editor, enter [[Getting_]] and a floating preview of the rendered GettingStarted Tiddler will appear. This GettingStarted tiddler uses the <$edit /> widget, and an error will occur if it is rendered.

Are there any issues that need to be paid attention to with this kind of widget that appears in non-story rivers or in regular locations? @Jermolene

[Jermolene]

Hi @oeyoews I don't understand why the CM6 widget is being rendered to the fakedom in the example in your illustration. The fakedom is used for rendering in fairly limited circumstances:

• Exported content and saved files
• Wikify widget
• Window title
• Stylesheets
• Commands like render and render tiddlers
• Typed blocks
• $tw.rootWidget

It can be useful to explicitly check for the fakedom with if(domNode.isTiddlyWikiFakeDom).

[oeyoews]

This seems strange, fakedom is only used in the case of float preview @Jermolene

Screenity.video.-.Jan.9.2024.2.mp4

[oeyoews]

autocompletion preview content use $tw.wiki.renderTiddler api, if tiddler include widget, this step maybe wikify widget.

[Jermolene]

Hi @oeyoews can you break on that TW_Element.appendChild element and then scroll up the call tree to find the original root .render() call that set everything off?

[oeyoews]

If the tiddler rendered using $tw.wiki.renderTiddler contains <$edit tiddler='xxx' />, fakedom will be used, Is this expected?

This also happens at https://tiddlywiki.com/edition/full. @Jermolene

[Jermolene]

Hi @oeyoews what preview mode are you using? Things like the "parse tree" and "widget tree" view are rendered using the wikify widget and so will use the fake dom for rendering.

[oeyoews]

const previewNode = $tw.wiki.renderTiddler('text/html', title);
const preview = document.createElement('div');
preview.innerHTML = previewNode;

I use this method for preview. I have tried rendering other widgets, such as widget, no errors will occur. Only this <$edit /> macro will cause errors. It seems to be cm6's engin.js wrong. There is something wrong with the cm6 engine.js. It doesn’t seem to be a problem with fakedom. I’m not very proficient in browser breakpoint debugging.

[Jermolene]

Hi @oeyoews the core edit widgets all include specific code to check for the fake dom. Perhaps you need to do the same, and only execute some code if you're running against the real dom.

[oeyoews]

Yes, I have discovered that if a virtual dom is encountered, a null value will be returned in the end. The writing method of cm6 plugin is exactly the same as the writing method of cm5 plugin. cm6 mount to virtual dom will cause errors, but cm5 does not have this problem. Therefore, it needs to be done manually. catch errors

[oeyoews]

Just add a try catch in $tw.wiki.renderTiddler to preview, so that you can catch all errors caused by fakedom, instead of just catch cm6 widget

[oeyoews]

I found that if I use the $index parameter of transclude, tw will automatically handle the error and return an empty <p></p>, so that I don’t have to manually catch the error. What is the specific function of this $index?
@Jermolene

TiddlyWiki5/core/modules/widgets/transclude.js

Line 426 in f08d3d6

output.push(this.transcludeIndex || "");

[pmario]

What is the specific function of this $index?

See: https://tiddlywiki.com/#TranscludeWidget

[oeyoews]

previewHTML = $tw.wiki.renderText(
   'text/html',
   'text/vnd.tiddlywiki', 
   `<$transclude $tiddler=${title} $mode=block />`
 ); 

$index should be the order of the fields. It seems thatonly need to use transclude.

[oeyoews]

I think I have figured out the relationship between $index and $field param. Unfortunately, I still have to manually add try catch last.

[Jermolene]

Hi @oeyoews that try/catch should not be necessary, and it would be good if we could track down what's going on. As I said before, I think the answer will be that your widget needs to check explicitly for the fake dom.