Monaca Onsen UI Discord Chat Github Repo

Uncaught TypeError on line 1 of index.html



  • I’m a bit perplexed by the error log “Uncaught TypeError: Cannot read property ‘appendChild’ of null” that shows up occasionally when loading an app for the first time (haven’t been able to get it to trigger predictably.)

    The log says that the error occurs on www/index.html:1 and that line only has “<!DOCTYPE HTML>” on it. As far as I know I haven’t tweaked anything other components than what is provided in the minimum template and have only added stuff after that line.

    Regardless, the app seems to be running as intended so far. Is it an error I should be concerned about? Or where should I be looking at if it’s triggering on the first line?

    Thanks!


  • administrators

    Can you post your index.html? It’s hard to know what the problem is without the code.



  • I did a bit more testing and spun up a fresh “Onsen UI V2 JS Minimum”. It suffers from the same Uncaught TypeError occasionally when live reloading with the Monaca Debugger app. Sometimes I get the “Uncaught ReferenceError: cordova is not defined” message on the log as well.

    The template index.html:

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
      <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
      <script src="components/loader.js"></script>
      <script src="lib/onsenui/js/onsenui.min.js"></script>
    
      <link rel="stylesheet" href="components/loader.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" href="css/style.css">
    
      <script>
        ons.ready(function() {
          console.log("Onsen UI is ready!");
        });
    
        if (ons.platform.isIPhoneX()) {
          document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
          document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
        }
      </script>
    </head>
    <body>
      This is a template for Onsen UI app.
    </body>
    </html>