React-Google-Apps-Script: serverFunctions[functionName] is not a function after upgrading project to match most recent repo update

Okay so after hours of debugging and constant white screens I was finally able to get everything working the way i want it. I have a few notes for anyone else that comes across these issues you might be able to link them back here to help.

react-router-dom DOES work, but only the MemoryRouter works with GAS’s sandbox, and you have to modify webpack because module-to-cdn doesn’t work with react-router-dom and the minified production package also caused issues. I did the following to fix it:

// DynamicCdnWebpackPlugin settings
// these settings help us load 'react', 'react-dom' and the packages defined below from a CDN
// see https://github.com/enuchi/React-Google-Apps-Script#adding-new-libraries-and-packages
const DynamicCdnWebpackPluginConfig = {
    // set "verbose" to true to print console logs on CDN usage while webpack builds
    verbose: false,
    resolver: (packageName, packageVersion, options) => {
        const packageSuffix = isProd ? '.min.js' : '.js'
        const moduleDetails = moduleToCdn(packageName, packageVersion, options)

        // don't externalize react during development due to issue with react-refresh
        // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/334
        if (!isProd && packageName === 'react') {
            return null
        }

        if (
            packageName === 'react-router-dom' ||
            packageName === 'react-router'
        ) {
            return null
        }
...
//rest of webpack code
}

this isn’t ideal but at least now react-router-dom is usable.

Another thing that threw me for a loop was some constants I had defined and exported for use throughout my codebase. I had two consts with very similar names and for some reason it was causing the entire add on to white screen:

export const API_URL = 'https://apiurl.com/api/v3/'
export const API_URL_V4 = 'https://apiurl.com/api/v4/'

I’m not sure what was happening with this one so if anyone figures it out let me know. I simply restructured and renames these to fix it.

Hm yea interesting. Out of curiosity is it the import * ... syntax, the export list separated into different lines, or combo of both that fixes it?

I guess I’m kinda not too surprised. Something about the autoGlobalExportsFiles implementation requires the exports and maybe the imports to look a certain way, but it doesn’t exactly follow standard export formatting. I remember I tried to do stuff like export onOpen from './...' and export * from './...' and they didn’t work, even if I tried installing the right babel plugins, that’s why I left that vague comment in that index.ts file.

Could ask @fossamagna in https://github.com/fossamagna/gas-webpack-plugin if he knows what’s going on.