The computer has come to shape our world and the universe. It is so important that we cannot do without this fantastic invention. You would have heard about networking before. Networking is all about connection, the concept of networking can be applied to every facet of human life. It refers to a computer as well.

React <BrowserRouter> throws TypeError

Anil

I am very new to React development. I am trying to develop a plugin for an Adobe product using Adobe UXP and React.js.

I am trying to make this plugin work on a single panel. I use react-router-dom to achieve this goal. However, I need to follow an uncommon approach to control the panel. I believe it is understandable by a react developer and it makes debugging a bit more complicated than a web app. I would like to learn why does not work. I use the following code pieces but I receive a type error.

Version info:

"react": "^16.8.6", "react-dom": "^16.8.6" "react-router-dom":"^6.3.0"

PanelController.jsx

import ReactDOM from "react-dom";
import React from "react";
import { BrowserRouter } from "react-router-dom";

export const PanelController = (component, { menuItems, invokeMenu }) => {
  var root = null;
  var attachment = null;

  const controller = {
    create() {
      root = document.createElement("div");
      root.style.height = "100vh";
      root.style.overflow = "auto";
      root.style.padding = "8px";
      ReactDOM.render(<React.StrictMode><BrowserRouter>{component}</BrowserRouter> </React.StrictMode>, root);
      console.log("Panel created");
    },
    destroy() {
      console.log("Panel destroyed");
    },
    show({ node }) {
      if (!root) {
        controller.create();
      }
      if (!attachment) {
        attachment = node; // the <body>
        attachment.appendChild(root);
      }
      console.log("Panel shown");
    },
    hide() {
      if (attachment && root) {
        attachment.removeChild(root);
        attachment = null;
      }
      console.log("Panel hidden");
    },
    menuItems,
    invokeMenu,
  };
  return controller;
};

Demos.jsx

import React from "react";


import { Routes, Route, useNavigate } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
};


export const Demos = () => {
  const navigate = useNavigate();
  return (
    <div>
      <nav>
        <button onClick={() => navigate("/")}>Home</button>
        <button onClick={() => navigate("/About")}>About</button>
        <button onClick={() => navigate("/")}>Dashboard</button>
      </nav>
      <hr />
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/about" exact element={<About />} />
        <Route path="/dashboard" exact element={<Dashboard />} />
      </Routes>
    </div>
  );
};

index.jsx

import React from "react";

import "./styles.css";
//import { CommandController } from "./controllers/CommandController.jsx";
//import { About } from "./components/About.jsx";
import { Demos } from "./panels/Demos.jsx";
import { entrypoints } from "uxp";
import { PanelController } from "./controllers/PanelController";

const flyout = {
  menuItems: [
    /* ... */
  ],
  invokeMenu(id) {
    /* ... */
  },
};

entrypoints.setup({
  panels: {
    demos: PanelController( <Demos />, {
      id: "demos",
      ...flyout,
    }),
  },
});

when I run this code I get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at getIndexAndLocation (webpack-internal:///./node_modules/history/index.js:88)
    at createBrowserHistory (webpack-internal:///./node_modules/history/index.js:143)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:153)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14803)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17482)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18596)
    at e.exports.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:188)
    at uxp://uxp-internal/domjs_scripts.js:2
    at I (uxp://uxp-internal/domjs_scripts.js:2)
    at uxp://uxp-internal/domjs_scripts.js:2

react-dom.development.js?61bb:19527 The above error occurred in the <BrowserRouter> component:
    in BrowserRouter
    in StrictMode

Consider adding an error boundary to your tree to customize error handling behavior.

What might be the possible reason for this?