CODEWITHSUNDEEP
google-apps-script
Mike Hogan
Mike Hogan

Reputation: 10613

Google App Script: URL in template literal results in "Uncaught SyntaxError: Unexpected end of input"

If I have this onOpen() setup for a Google Docs Add On:

function onOpen(e) {
    DocumentApp.getUi().createAddonMenu()
        .addItem('Edit Template', 'showSidebar')
        .addToUi();
}

function showSidebar() {
    const html = HtmlService
        .createHtmlOutputFromFile("dist/addOn");
    html.setTitle("DocsNData Template Editor");
    DocumentApp.getUi().showSidebar(html);
}

and if dist/addOn.html contains this:

<html>
<head>
    <script>
        let x = `https://api.airtable.com`;
    </script>
</head>
</html>

I get this error in the browser console when I try to launch the Add On:

userCodeAppPanel:3 Uncaught SyntaxError: Unexpected end of input

If I change the contents of the string so it's not a url, it works. This works in other words:

<html>
<head>
    <script>
        let x = `abc`;
    </script>
</head>
</html>

So it's not the use of a template literal that is the problem.

In addition, referencing a URL as a normal string works, i.e. this is fine:

<html>
<head>
    <script>
        let x = "https://api.airtable.com";
    </script>
</head>
</html>

So URLs in strings are not a problem, template literals are not a problem, its urls in template literals that are the problem. I have two questions:

  1. Why is this the case and whats the right corrective action?
  2. How do the line numbers reported in the error messages relate to my source?

Upvotes: 1

Views: 527

Answers (1)

Tanaike
Tanaike

Reputation: 201428

  • Q1: Why is this the case and whats the right corrective action?
  • Q2: How do the line numbers reported in the error messages relate to my source?

For these questions, how about this answer?

A1:

I have experienced the same situation. In this case, I used the following workaround.

From:

let x = `https://api.airtable.com`;

To:

let x = `https:\/\/api.airtable.com`;
  • When let x = `https://api.airtable.com`; is used at Google Apps Script side, no error occurs. So I think that this might be the current specification or a bug.
  • Google Issue Tracker: Although I searched this issue at Google Issue Tracker, I couldn't find it. So I reported this to Google Issue Tracker. https://issuetracker.google.com/issues/156139610

A2:

About userCodeAppPanel:3, I think that at first, it is required to confirm the error message. When the error message of Uncaught SyntaxError: Unexpected end of input is seen, this means the incomplete syntax. By this, it is considered that the error occurs at the end of script of <script>...</script>. In this case, 3 is the same with the length of the lines in <script>...</script>.

When your following script is seen, the error occurs at let x = `https://api.airtable.com`;. But the error line is the end of script of <script>...</script>. By this, 3 is returned.

<html>
<head>
    <script>
        let x = `https://api.airtable.com`;
    </script>
</head>
</html>

In the case of following sample script, userCodeAppPanel:5 Uncaught SyntaxError: Unexpected end of input is returned. Because the line of </script> is at 5th line.

<html>
<head>
    <script>
        let x = `https://api.airtable.com`;


    </script>
</head>
</html>

As an another sample, when the following script is seen,

<html>
<head>
    <script>
    let x = "https://api.airtable.com";

    console.log(y);
    </script>
</head>
</html>

An error occurs like Uncaught ReferenceError: y is not defined at userCodeAppPanel:4. In this case, the error line can be clearly found. So 4 is the line of console.log(y);.

Unfortunately, I have not been able to be found about this at the official document.

Upvotes: 6

Related Questions