serverFunctions[functionName] is not a function after upgrading project to match most recent repo update

[sheldoncoates]

After matching up deps, files, webpack, etc. I've almost got my add-on up and running again but I'm getting a weird error relating to my server functions when I run with npm start.

I'm not really sure why it's happening... I can see my code.gs has all the ui.js and sheets.js functions in it as I've exported them from index.ts

Any ideas?

[sheldoncoates]

Just to add to this import { serverFunctions } from '../src/client/utils/serverFunctions.ts' resolves to an empty object {} inside ./dev/index.js. Still investigating why this is.

[sheldoncoates]

I have converted src/server/index.ts, src/client/utils/serverFunctions.ts both to js files and this fixed the issue, but I'm not 100% sure why.

[enuchi]

Not sure when your original project was cloned but there have been some changes to how gas-client project exports serverFunctions (default vs named export). Also there have been some changes as to how to expose global functions in the src/server/index.ts file. Old way was with .js and using the global.myFunction = myFunction approach, but with latest version you can use export { myFunction } to expose global server functions.

[sheldoncoates]

it was cloned a long time ago, but i've gone through and update all files to match this repo and the screenshot is the error I'm getting... not sure why the serverFunctions aren't loading. You have any ideas?

[sheldoncoates]

To me it seems like

 plugins: [
        new GasPlugin({
            // removes need for assigning public server functions to "global"
            autoGlobalExportsFiles: [serverEntry],
        }),
    ],

isn't actually exporting

[enuchi]

yes you may be right -- if I remove that config on a fresh clone I see that message. What version of gas-webpack-plugin do you have? Works for me with 2.2.2

[sheldoncoates]

I'm using the same version... tried with a newer version as well and still have the same issue

[sheldoncoates]

does your code.gs have the keyword global in it?

[enuchi]

Yes it does. Here's what code.gs should look like with fresh clone. What does your src/server/index.ts look like? I don't think it works properly for me using .js.

var global = this;

function __esModule() {}

function setActiveSheet() {}

function onOpen() {}

function openDialog() {}

function openDialogBootstrap() {}

function openDialogMUI() {}

function openDialogTailwindCSS() {}

function openAboutSidebar() {}

function getSheetsData() {}

function addSheet() {}

function deleteSheet() {}

(() => {
    "use strict";
    var __webpack_modules__ = [ , (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
        __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
            onOpen: () => onOpen,
            openAboutSidebar: () => openAboutSidebar,
            openDialog: () => openDialog,
            openDialogBootstrap: () => openDialogBootstrap,
            openDialogMUI: () => openDialogMUI,
            openDialogTailwindCSS: () => openDialogTailwindCSS
        });
        var onOpen = function() {
            SpreadsheetApp.getUi().createMenu("My Sample React Project").addItem("Sheet Editor", "openDialog").addItem("Sheet Editor (Bootstrap)", "openDialogBootstrap").addItem("Sheet Editor (MUI)", "openDialogMUI").addItem("Sheet Editor (Tailwind CSS)", "openDialogTailwindCSS").addItem("About me", "openAboutSidebar").addToUi();
        }, openDialog = function() {
            var html = HtmlService.createHtmlOutputFromFile("dialog-demo").setWidth(600).setHeight(600);
            SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
        }, openDialogBootstrap = function() {
            var html = HtmlService.createHtmlOutputFromFile("dialog-demo-bootstrap").setWidth(600).setHeight(600);
            SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor (Bootstrap)");
        }, openDialogMUI = function() {
            var html = HtmlService.createHtmlOutputFromFile("dialog-demo-mui").setWidth(600).setHeight(600);
            SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor (MUI)");
        }, openDialogTailwindCSS = function() {
            var html = HtmlService.createHtmlOutputFromFile("dialog-demo-tailwindcss").setWidth(600).setHeight(600);
            SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor (Tailwind CSS)");
        }, openAboutSidebar = function() {
            var html = HtmlService.createHtmlOutputFromFile("sidebar-about-page");
            SpreadsheetApp.getUi().showSidebar(html);
        };
    }, (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
        __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
            addSheet: () => addSheet,
            deleteSheet: () => deleteSheet,
            getSheetsData: () => getSheetsData,
            setActiveSheet: () => setActiveSheet
        });
        var getSheets = function() {
            return SpreadsheetApp.getActive().getSheets();
        }, getSheetsData = function() {
            var activeSheetName = SpreadsheetApp.getActive().getSheetName();
            return getSheets().map((function(sheet, index) {
                var name = sheet.getName();
                return {
                    name: name,
                    index: index,
                    isActive: name === activeSheetName
                };
            }));
        }, addSheet = function(sheetTitle) {
            return SpreadsheetApp.getActive().insertSheet(sheetTitle), getSheetsData();
        }, deleteSheet = function(sheetIndex) {
            var sheets = getSheets();
            return SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]), getSheetsData();
        }, setActiveSheet = function(sheetName) {
            return SpreadsheetApp.getActive().getSheetByName(sheetName).activate(), getSheetsData();
        };
    } ], __webpack_module_cache__ = {};
    function __webpack_require__(moduleId) {
        var cachedModule = __webpack_module_cache__[moduleId];
        if (void 0 !== cachedModule) return cachedModule.exports;
        var module = __webpack_module_cache__[moduleId] = {
            exports: {}
        };
        return __webpack_modules__[moduleId](module, module.exports, __webpack_require__), 
        module.exports;
    }
    __webpack_require__.d = (exports, definition) => {
        for (var key in definition) __webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key) && Object.defineProperty(exports, key, {
            enumerable: !0,
            get: definition[key]
        });
    }, __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop), 
    __webpack_require__.r = exports => {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(exports, "__esModule", {
            value: !0
        });
    };
    var __webpack_exports__ = {};
    (() => {
        var exports = __webpack_exports__;
        exports.__esModule = !0, exports.setActiveSheet = exports.deleteSheet = exports.addSheet = exports.getSheetsData = exports.openAboutSidebar = exports.openDialogTailwindCSS = exports.openDialogMUI = exports.openDialogBootstrap = exports.openDialog = exports.onOpen = void 0;
        var ui_1 = __webpack_require__(1);
        exports.onOpen = ui_1.onOpen, exports.openDialog = ui_1.openDialog, exports.openDialogBootstrap = ui_1.openDialogBootstrap, 
        exports.openDialogMUI = ui_1.openDialogMUI, exports.openDialogTailwindCSS = ui_1.openDialogTailwindCSS, 
        exports.openAboutSidebar = ui_1.openAboutSidebar;
        var sheets_1 = __webpack_require__(2);
        exports.getSheetsData = sheets_1.getSheetsData, exports.addSheet = sheets_1.addSheet, 
        exports.deleteSheet = sheets_1.deleteSheet, exports.setActiveSheet = sheets_1.setActiveSheet, 
        global.__esModule = exports.__esModule, global.setActiveSheet = exports.setActiveSheet, 
        global.onOpen = exports.onOpen, global.openDialog = exports.openDialog, global.openDialogBootstrap = exports.openDialogBootstrap, 
        global.openDialogMUI = exports.openDialogMUI, global.openDialogTailwindCSS = exports.openDialogTailwindCSS, 
        global.openAboutSidebar = exports.openAboutSidebar, global.getSheetsData = exports.getSheetsData, 
        global.addSheet = exports.addSheet, global.deleteSheet = exports.deleteSheet;
    })();
    for (var i in __webpack_exports__) this[i] = __webpack_exports__[i];
    __webpack_exports__.__esModule && Object.defineProperty(this, "__esModule", {
        value: !0
    });
})();

[sheldoncoates]

I do see the message Could not find a declaration file for module './ui'. on the imports and it doesn't seem like the functions are being recognized.

[sheldoncoates]

so I've narrowed it down to the tsconfig causing the issues

{
    "compilerOptions": {
        "types": ["gas-types-detailed"],
        "jsx": "react",
        "esModuleInterop": true,
        "lib": ["es2019", "dom"]
    }
}

this adds global to code.gs, but only for the last exported function in server/index.ts and if i change this in anyway it removes global.

Have you experienced this before?

[enuchi]

Hmm I haven't. Can you try using the latest tsconfig used here? There are a couple other issues here that bring up tsconfig but not sure if they're relevant.

{
  "compilerOptions": {
    "types": ["gas-types-detailed"],
    "jsx": "react",
    "esModuleInterop": true
  }
}

[enuchi]

I get the same error Could not find a declaration file for module './ui'. in my code but it compiles fine so don't think that's the issue.

[sheldoncoates]

I need to have my tsconfig as

{
    "compilerOptions": {
        "types": ["gas-types-detailed"],
        "jsx": "react",
        "lib": ["es2019", "dom"],
        "esModuleInterop": true
    }
}

at the minimum for my application to compile... it is react ts. also i would be great to compile to ES6... the current setup compiles modules to ES5 I belive? I modified the old tsconfig to compile everything to ES6 and the bundle went from 5MiB to 500KiB

[enuchi]

Yea some alternate configs for tsconfig come up in #141. I think the best solution is to have two different tsconfig files, one in the base of src/server and one in src/client. The server one can just be the latest version in this repo, and the client one can be further modified to support react etc. I tried it out briefly a while ago and seemed to work.

I am also not convinced the tsconfig file is the culprit with your error. I tried using your file and it still compiled fine. Can you try a fresh clone of this repo and see if you're able to properly generate the code.gs server file? Just to rule out some global settings.