Error using React Hooks In Google Sheets Sidebar (Google Apps Script)

Question

I am using React Hooks in Google Sheets Sidebar (Google Apps Script). The sidebar has four buttons, clicking any of them makes the sidebar display the currently active cell in Google Sheets.

I am getting the below error in the browser console :

Uncaught TypeError: serverFunctions[functionName] is not a function at handleRequest

The weird thing is that the sidebar works as intended: The activeRange of the current cell is shown in the sidebar as intended when any of the buttons are clicked. So I am wondering where this error is coming from. I even tried to console.log the function console.log(serverfunctions.getActiveRangeA1) and the function shows up in the console!!!

serverFunctions.getActiveRangeA1: function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; }

Why is the error coming up?

Reproducible example

I am basically just testing out this awesome package https://github.com/enuchi/React-Google-Apps-Script/

I created a git fork from that so you can replicate the error: https://github.com/nykanenj/React-Google-Apps-Script

git clone https://github.com/nykanenj/React-Google-Apps-Script.git
cd React-Google-Apps-Script
npm install
npm run login
npm run setup
npm run deploy

Now open the Google Sheet "React SideBar Testing" that was created by npm run setup in your browser. A menu "My Sample React Project" should be seen, click that to open the sidebar and see the buttons.

The relevant code

This is what the frontend SideBar.jsx code looks like:

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import server from '../../utils/server';

const { serverFunctions } = server;

const SideBar = () => {
    console.log(`serverFunctions: ${JSON.stringify(serverFunctions)}`)
    console.log(`serverFunctions.getActiveRangeA1: ${serverFunctions.getActiveRangeA1}`)

    const [activeRange, setActiveRange] = useState();
    const getActiveRangeA1 = () => {
        serverFunctions
          .getActiveRangeA1()
          .then(setActiveRange)
          .catch(alert);
      };

    return (
    <div>
    <button id="test" onClick={getActiveRangeA1}>Click Me1 </button>
    <button id="test" onClick={()=>getActiveRangeA1()}>Click Me2 </button>
    <Button onClick={getActiveRangeA1}>Click Me 3</Button>
    <Button onClick={() => getActiveRangeA1()}>Click Me 4</Button>
    <p>Current active range is: {activeRange}</p>
  </div>)
}

export default SideBar;

Rendered by:

import React from 'react';
import ReactDOM from 'react-dom';
import SideBar from './components/SideBar';

import './styles.css';

ReactDOM.render(<SideBar />, document.getElementById('index'));

Contents of ../../utils/server

import Server from 'gas-client';

const { PORT } = process.env;

const server = new Server({
  // this is necessary for local development but will be ignored in production
  allowedDevelopmentDomains: `https://localhost:${PORT}`,
});

export default server;

This is what the server side code of index.js looks like

import * as publicUiFunctions from './ui';
import * as publicSheetFunctions from './sheets';

// Expose public functions by attaching to `global`
global.onOpen = publicUiFunctions.onOpen;
global.openSidebar = publicUiFunctions.openSidebar;
global.getActiveRangeA1 = publicSheetFunctions.getActiveRangeA1;

Code for server side sheets.js referenced by './sheets'

export const getActiveRangeA1 = () => {
  return SpreadsheetApp.getActive().getActiveSheet().getActiveRange().getA1Notation();
 }

As I say, the code is working perfectly fine but the error is showing up.

Uncaught TypeError: serverFunctions[functionName] is not a function at handleRequest

I would expect that there is a problem with functionName, basically serverFunctions.getActiveRangeA1 . I guess serverFunctions cannot be null, because serverFunctions is detected in the error. So I guess functionName is null or missing from serverFunctions. But when I console.log(serverfunctions.getActiveRangeA1) this returns a function, so no error should come up?

Answer 1

Have you tried stopping and restarting the "npm run start"?

I have encountered this issue while fixing another issue. After a few tries, I noticed that whenever a server-side function is changed I had to restart the application "npm run start" in order for them to work.

I think it's necessary to add in the Github README.md that the local development only accommodates for changes made on the react side, not on the google app script side

My first reply here, so my bad is it's not a clear one.