Using transpiled ES6 in Google Apps Script => ReferenceError: “SomeClass” is not defined

Question

I\'m trying to use ES6 in a Google Spreadsheet (in the script.google.com part). I\'m pretty new to JavaScript and maybe the error is trivial ...

---

Answer 1

So I've been playing with this for a while now; using transpiled ES6 (even ES7/next features) in GAS. The main hurdle you need to overcome is exposing the functions in the modules to the global scope.

In browsers this could be window, or document. In GAS there is no such global. What I've tagged it to is the this context in the main Code.gs.

Webpack allows you to build stand alone modules to distribute libraries, etc. This is the link to the Webpack docs that covers changing the output module type.

output: {
    libraryTarget: "this",
    path: __dirname + '/dist',
    filename: 'Code.gs'
},

This is what your output config should look like.

You should then export functions from your main .js file to have them attach to the global context, like so:

export function onInstall(e) {
  onOpen(e);
}

From here you should copy and paste the script as you normally would into the GAS Script Editor and have it run the onInstall function to give it access to your drive/sheets/etc.

Hope this helps!

Answer 2

As I told in the comments, GAS isn't your everyday Javascript, to overcome that error you can create a Global Var 'SomeClass', then remove the var keyword before the function you declare inside the main function. This will get rid of this error, but another one will arise.

What's your final goal with this webpack? Why it's important within GAS?

Answer 3

Using the new Apps Script v8 runtime, you can use modern javascript without any transformations by setting "runtimeVersion": "V8" in your appsscript.json file.

Answer 4

Update as on 2018:

If you are craving for modern Javascript within GAS, you can either use Webpack as described by James or if you are comfortable using Typescript, you can use clasp for this.

Clasp is an official GAS deployment toolkit that lets you to develop your Apps Script projects locally and deploy it to Apps Script when you're done. Since the code is local, you can use your favorite IDE and development tools like git when building Apps Script projects.

Answer 5

I tried several of the suggested ways mentioned above. However, utilizing this plugin with webpack 2.X is the only thing that worked for me.

https://github.com/fossamagna/gas-webpack-plugin

Please Note: This does not yet work with webpack 4.X.

I could regurgitate their Readme.md here, but I find that unnecessary.

In a nutshell you need to add this plugin to your webpack config and then add functions to global. These functions get added as top level functions.