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 ...

28/09: The error for the post as changed as I was just using a Google Apps Script library name (Logger), I switch to SomeClass. I'm looking to module as my declaration is not the good one

What I have done:

Created a webpack project
Created a Logger class
Created a main.js where I import the Logger class
WebPack generate a bundle from my main.js
I copy/paste the bundle.js in a bundle file on script.google
I try to run a test in script.google but got ReferenceError:SomeClass is not define.`

Here is my code:

SomeClass.js

export default class SomeClass {
    constructor() {
        this.loggerSheet = SpreadsheetApp.getActiveSpreadsheet()
                                    .getSheetByName("ImportLog");
    }

    LogInfo(data) {
      Logger.log(data);
      loggerSheet.appendRow([new Date(), "INFO", data]);
    }
}

Main.js

import SomeClass from './SomeClass.js';

Test in script.google

function test_bundle() {
  var someClass = new SomeClass(); //<== breaks here
}

Bundle.js => copy/paste to script.google

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

    var _SomeClassJs = __webpack_require__(4);

    var _SomeClassJs2 = _interopRequireDefault(_SomeClassJs);

/***/ },
/* 1 */,
/* 2 */,
/* 3 */,
/* 4 */
/***/ function(module, exports) {

    "use strict";

    Object.defineProperty(exports, "__esModule", {
        value: true
    });

    var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var SomeClass = (function () {
        function SomeClass(option) {
            _classCallCheck(this, SomeClass);

            this.loggerSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ImportLog");
        }

        _createClass(SomeClass, [{
            key: "logInfo",
            value: function logInfo(data) {
                loggerSheet.appendRow([new Date(), "INFO", data]);
            }
        }]);

        return SomeClass;
    })();

    exports["default"] = SomeClass;
    module.exports = exports["default"];

/***/ }
/******/ ]);

I dunno what transpiling is exactly and what your final goal is, but Logger is a reserved Google Apps Script class, you can't change it (or shouldn't). Also, keep in mind that GAS isn't your everyday Asynchronous/Client-side Javascript, Google's compiler has several changes that you may have to work around, eg. you can't 2 functions simultaneously, there's no setTimeout not webWorkers. — Kriggs, Sep 28 '15 at 12:28
Thanks for informations. Transpiling here is for writing ES5 code from ES6 code. — Thibault Deheurles, Sep 28 '15 at 13:03
You remove me an error @Kriggs, as the Logger did exist in Google Apps Script, I was thinking my bundle import was good. It's not the case as changing the name make the error bcaoming `ReferenceError: "SomeClass" is not defined`. So I may just need to learn how to create a module now. Thank you — Thibault Deheurles, Sep 28 '15 at 13:15
The response to this question can be found in [this post](http://stackoverflow.com/questions/32826000/javascript-how-to-create-es5-lib-with-es6?noredirect=1#comment53492436_32826000). — Thibault Deheurles, Sep 29 '15 at 11:28

score 9 · Answer 1 · answered May 02 '16 at 02:23

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!

I couldn't get this to work. The webpack 2 docs for libraryTarget [are here](https://webpack.js.org/concepts/output/#output-librarytarget), but they look pretty much identical to the docs you linked. Anyhow, I couldn't get this to work. When I `export function foo` webpack still puts it in an enclosure, so in the script editor exported functions aren't available from the dropdown at the top. I guess it's possible that after the script is parsed the enclosure exports these functions to the global or `this` scope, so they might be accessible. — Mr5o1, Jun 22 '17 at 11:20

score 2 · Answer 2 · answered Mar 14 '18 at 01:29

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.

It does support Webpack 4.X now :) – maysi Jul 27 '18 at 19:13 — maysi, Jul 27 '18 at 19:13

score 1 · Answer 3 · answered Oct 11 '18 at 06:52

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.

score 0 · Answer 4 · answered Sep 28 '15 at 13:39

0

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?

answered Sep 28 '15 at 13:39

Kriggs

3,731
1
15
23

2

I'm unable to use common tools with GAS (ie: github, ES6). The idea is to write code outsite, and then, import it the easier way I can find. For now it seems there is no API to import outside code. So I just generate a bundle, and copy/paste it to GAS. – Thibault Deheurles Sep 28 '15 at 14:55
The problem seems to come from the fact my bundle does not expose my class/functions. – Thibault Deheurles Sep 28 '15 at 15:23
Also, you must globally expose your functions. You can use an IIFE if you want, but you'll have to have some way of connecting to the Google APIs. – sjsyrek Feb 05 '16 at 13:29
And maybe try Try `import {SomeClass} from './SomeClass.js';` instead of `import SomeClass from './SomeClass.js';` in your `main.js` file. – sjsyrek Feb 05 '16 at 13:32
3

@ThibaultDeheurles You can now use clasp to manage Apps Scripts projects: https://developers.google.com/apps-script/guides/clasp – tehhowch Mar 14 '18 at 05:07

score 0 · Answer 5 · answered Jun 13 '20 at 08:04

0

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

answered Jun 13 '20 at 08:04

Richie Bendall

7,738
4
38
58

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

5 Answers5

Linked