Error on Windows on each run - "appendChild" property cannot be retrieved

[ThomasTJdev]

When running the examples - or creating my own programs - I always encounter the error below:

Translated There was an error in the script on this page.

The "appendChild" property cannot be retrieved for undefined or null reference.

Continue?

[juancarlospaco]

It is a known "bug", basically if you target Windows, you have to keep IE compatibility, theres tools on JavaScript world to compile the JavaScript to older JavaScript compatible with Internet Explorer, like Babel and similar. Basically of the 3 web engines built in the OS, the Windows one sucks the most.

Honestly I do not know a better way to fix that. I look for other alternatives and libs to wrap but they tend to use .NET on Windows. :(

[bitnom]

Wasn't the new Edge built using Chromium as a base? Does it not replace the old IE webview?

edit: I don't quite understand. IE is not Webkit so what does IE have to do with it?

[juancarlospaco]

It does not use Chromium, thats why is more light weight than ElectronJS. :)

[marcomq]

I got the same error on the blink example, that doesn't even use Javascript in the HTML part.

This error is from 'CSS_INJECT_FUNCTION' in webview.h It is the only occurance of appendChild that I could find in the code.

I was able to run the example on windows without error message after making some modifications in the webview.h I changed the webview.h from

#define CSS_INJECT_FUNCTION                                                    \
  "(function(e){var "                                                          \
  "t=document.createElement('style'),d=document.head||document."               \
  "getElementsByTagName('head')[0];t.setAttribute('type','text/"               \
  "css'),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document."          \
  "createTextNode(e)),d.appendChild(t)})"

to

#define CSS_INJECT_FUNCTION                                                    \
  "(function(e){var "                                                          \
  "t=document.createElement('style'),d=document.head||document."               \
  "getElementsByTagName('head')[0];t.setAttribute('type','text/"               \
  "css'),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document."          \
  "createTextNode(e))})"

After this, I needed to force to recompile the example with nim c -r -f example.nim

However, this isn't any permanent solution. The "blink" text stopped blinking in the application. So there are now issues with inline css. Maybe also other new CSS issues.

The CSS_INJECT_FUNCTION issue in the Webview.h was also in the original Webview code and was never changed. The code doesn't exists in the current webview main branch, as there were massive changes in March. A complete new webview branch was merged that changed webview.h completely: https://github.com/webview/webview/commit/843c3aaba6a14f11b37db2c58879534f253f37d5#diff-90d68d8f03ac5ea2a94bf99d53d4b9d0

[ThibaudMZN]

Did you guys manage to fix this ? I'm having exactly the same problem

[bung87]

@juancarlospaco I think in newWebView result.css should not be called by default. this project main usage is create crossplatorm web based gui, the end developer will use their own design in common, I also notice jsTemplate use arrow function syntax which is not supported in old IE webview, please alteast make this project usable.

[bung87]

thought appendChild need dom ready, we can simply use onload even there is little different.
I've tested on win11.

#define CSS_INJECT_FUNCTION                                                    \
  "(function(e){window.onload=function(){var "                                                          \
  "t=document.createElement('style'),d=document.head||document."               \
  "getElementsByTagName('head')[0];t.setAttribute('type','text/"               \
  "css'),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document."          \
  "createTextNode(e)),d.appendChild(t)}})"

[juancarlospaco]

Pull Request welcome, and will be merged, right now I do not have Windows to test easily.

[CardealRusso]

why it was closed? this error stills persist

[CardealRusso]

Using run_js example, first i get this error

Using @bung87 will prevent this error but it still (even without the fix) a second error happens:

wich wont fully load the js