Window is not defined

Forge Forge UI Kit and Custom UI
, , ,
1

Hi, i’m having this error when using UI Kit 2

ReferenceError: window is not defined
    at getCallBridge (webpack://forge-ui-starter/node_modules/@forge/bridge/out/bridge.js:9:1)
    at Object.104 (webpack://forge-ui-starter/node_modules/@forge/bridge/out/invoke/invoke.js:7:1)
    at __webpack_require__ (webpack://forge-ui-starter/webpack/bootstrap:19:1)
    at Object.7312 (webpack://forge-ui-starter/node_modules/@forge/bridge/out/invoke/index.js:4:1)
    at __webpack_require__ (webpack://forge-ui-starter/webpack/bootstrap:19:1)
    at Object.3228 (webpack://forge-ui-starter/node_modules/@forge/bridge/out/index.js:4:1)
    at __webpack_require__ (webpack://forge-ui-starter/webpack/bootstrap:19:1)
    at Object.6540 (webpack://forge-ui-starter/node_modules/@forge/react/out/hooks/useProductContext.js:4:1)
    at __webpack_require__ (webpack://forge-ui-starter/webpack/bootstrap:19:1)
    at Object.5944 (webpack://forge-ui-starter/node_modules/@forge/react/out/index.js:5:1)

This is my JS

import { Bank, getAllBanks } from "../utils/bank";
import  {DynamicTable} from "@forge/react";

export default function BanksTable() {

    const [banks, setBanks] = useState([]);


    const createKey = (input) => {
        return input ? input.replace(/^(the|a|an)/, "").replace(/\s/g, "") : input;
    }
    
    useEffect(() => {
        const fetchData = async () => {
            try {
                setBanks(getAllBanks());
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        };

        fetchData();

    }, [editActionCounter]);    
    
    const rows = banks.map((banksRow, index) => ({
        key: `row-${index}-${banksRow.value.name}`,
        cells: [
          {
            key: createKey(banksRow.value.name),
            content: <Link href="">{banksRow.name}</Link>,
          },
          {
            key: createKey("contratedHours"),
            content: banksRow.value.contratedHours == 1000000 ? "∞" : banksRow.value.contratedHours,
          },
        ],
      }));
    
    
    const head = {
        cells: [
          {
            key: "name",
            content: "Name",
            isSortable: true,
          },
          {
            key: "Contrated Hours",
            content: "Contrated Hours",
            isSortable: false,
          },
        ],
      };


    return (
        <DynamicTable
            rowsPerPage={5}
            head={head}
            rows={rows}
        />

    );
}
2

From the error message, it seems to be an issue with a use of invoke from Forge bridge. Do you use that in getAllBanks?

Otherwise, it might be a matter of changing the manifest and render method, like in this previous question.

1 Like
3

Hi, i am not using forge bridge on that class, also i tried to copye the example that atlassian give on the ui kit 2 and din’t work.

I try the solution you give me, but it din’t work too.

Thanks for your wuickly answer

4

Hey! I think this might be the issue.

Try wrapping it as follows:

            content: <Text> {banksRow.value.contratedHours == 1000000 ? "∞" : banksRow.value.contratedHours} </Text>,

don’t forget you’ll also need to import the Text Component in line 2:

import  {DynamicTable, Text} from "@forge/react";

If this solves the problem, please mark it as solved!
Mel

5

It’s likely a frontend Forge package within your utils import. Forge bundler is flawed.