Google Apps Script libraries are not working on a webapp

Question

I'm a newbie in web development in Google Apps Script and I'm having a hard time trying to run a simple webapp which is supposed to set up a menu example by using SlickNav jQuery Plugin. I successfully set it up as a GAS library (you can see the source code here). That plugin requires jQuery 1.7 onwards, so I've also set up jQuery (v2.1.0) as a GAS library (click here to see the code).

After importing both of them as libraries:

in my webapp, it works like a charm in dev. mode:

but in production mode, it throws

"ReferenceError: undefined "jQuery". (line 1, file "slicknav.js", project "slicknav")"

I've spent 3 days trying to make this example running. Am I missing something on this example? What could it be wrong? Can somebody here point me in the right direction?

Thanks in advance.

Douglas Gaskell Douglas Gaskell · Accepted Answer · 2017-07-12T21:42:02

You cannot use JQuery inside of Apps Script as Apps Script since GAS does not have a DOM to manipulate.

If you wish to use JQuery, or any other JavaScript library inside your web app you need to add it with a <script> tag. Such as adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside your <head> or below your <body> tags.

Google even has a set of hosted libraries that you can include in your web app: https://developers.google.com/speed/libraries/

If you don't want to use a CDN service (like the google hosted libraries) you can copy/paste the source into a new GAS html file, and include that in your web app.

Example:

jquery.html

<script>
//Paste jquery.min.js here
</script>

index.html

<html>
    <head>
        <?!= HtmlService.createHtmlOutputFromFile('jquery').getContent(); ?>
    </head>
</html>

After Clarification:

JQuery needs to be loaded before slicknav, since it requires it. It looks like you are, but that's the error it's throwing. I would start by simplifying your process and using script tags with CDN hosted libraries and see if that works. Then try including the files in your current project and see if that works...etc Try and isolate the problem in that manner.

It's also good to note than when deploying, you HAVE to update the version to apply and development changes.

Google Apps Script libraries are not working on a webapp

1 Answers