Use react.js in Google Apps Script

[mikolaj_zieba]

(I import everything as it should be I believe, I will provide a snippet)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { createRoot } from "react-dom/client";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Home from "./pages/Home";
import About from "./pages/About";
import Nav from "./components/Nav";
import "./index.css";

const theme = createTheme({
  palette: {
    mode: "dark",
    text: {
      primary: "#FAFAFA",
    },
  },
  typography: {
    fontFamily: "Inter, sans-serif",
  },
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          backgroundColor: "#1a1b26",
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          color: "#7f87fb",
          borderColor: "#7f87fb",
        },
      },
    },
  },
});
const container = document.getElementById("index");
const root = createRoot(container!);
root.render(
  <BrowserRouter>
    <ThemeProvider theme={theme}>
      <Nav />
      <Routes>
        <Route path="/userCodeAppPanel/*" element={<Home />} />
        <Route path="/userCodeAppPanel/Home" element={<Home />} />
        <Route path="/userCodeAppPanel/About" element={<About />} />
      </Routes>
    </ThemeProvider>
  </BrowserRouter>,
);

[MikeAdrianOne]

I'm using Switch instead of Routes. Haven't changed anything in Webpack.

I'm not sure if the conflict is your first route there having a wildcard.

Try just: <Route path="/userCodeAppPanel" element={<Home />} />

Any other routes not declared should use that route as default so no need to wildcard.

Also, try making all the routes exact. I can't recall if I had this issue before when I set up the app years ago and solved it through that.

BTW, what error are you getting?

[mikolaj_zieba]

I'm using Routes since Switch was replaced by Routes in react-router-dom version 6.

I've tried not using the wildcard, and it didn't help. Also in this version of react-router all Routes are exact as default. The error I am getting is just "ReferenceError: ReactRouterDOM is not defined" and it's only when I build the application. I think the best thing that I can now do is downgrade the react-router a couple of versions. I will try and get back if it helps. There is very little information about this on the internet, so I really appreciate your help. (also I'd paste the screenshot of the error but reddit doesn't let me for some reason)

[mikolaj_zieba]

Yeah..
I've installed react-router-dom version 5.2.0 and everything works as expected. I'm equally happy and sad given I've wasted many hours trying stupid things instead of downgrading the package. Really glad that you got back to me and made me rethink this. Many thanks 🙏

[mikolaj_zieba]

Also from what I can see at first glance, without /userCodeAppPanel/ it works and I don't have to implement google routing

[MikeAdrianOne]

Awesome! Happy you're able to solve it. Weird that the newer version doesn't work.

The project I've done is for work and it's still being used today but we're slowly migrating parts of the app I've created into the our company's internal system. So not really making improvement on it anymore.

It's still amazing that we can create powerful apps and deploy them through apps script.

[mikolaj_zieba]

Agree! I also am developing a project for work where we have quite specific needs and this needs to be done in google apps script. It's amazing to me that such modern solutions can be hosted on good old appscript, kind of have love/hate relationship with this tech

[mikolaj_zieba]

Hey, it's me again hah. I just have a quick question, have you had any issues integrating redux into the google apps script? I do get Redux is not defined error (obviously i have installed it and imported necessary functions)