Window is undefined in NextJS + Tauri

Question

What I'm trying to do:

I was using the appWindow from Tauri to access the appWindow.minimize(), appWindow.toggleMaximize(), and appWindow.close() to create a custom title bar.

What the code looks like:

import { appWindow } from "@tauri-apps/api/window";

const CustomTitleBar = () => {
  const hasLoaded = hasLoadedCSR(); // custom hook for checking if component has mounted using useEffect

  if (typeof window === "undefined") return <></>; // 1st attempt to disable SSR for this component
  if (!hasLoaded) return <></>; // 2nd attempt to disable SSR for this component
  return (
    <>
      <div data-tauri-drag-region className="titlebar">
        <button
          className="titlebar-button"
          id="titlebar-minimize"
          onClick={() => {
            console.log("Clicked");
            appWindow.minimize();
          }}
        >
          <img
            src="https://api.iconify.design/mdi:window-minimize.svg"
            alt="minimize"
          />
        </button>
        <button
          className="titlebar-button"
          id="titlebar-maximize"
          onClick={() => appWindow.toggleMaximize()}
        >
          <img
            src="https://api.iconify.design/mdi:window-maximize.svg"
            alt="maximize"
          />
        </button>
        <button className="titlebar-button" id="titlebar-close">
          <img
            src="https://api.iconify.design/mdi:close.svg"
            alt="close"
            onClick={() => appWindow.close()}
          />
        </button>
      </div>
    </>
  );
};

export default CustomTitleBar;

I basically did 2 attempts to solve the problem because I definitely think this is caused by SSR as mentioned by FabianLars in a similar question.

score 4 · Accepted Answer · answered Dec 23 '22 at 17:29

4

To fix the problem, I basically created another component using the dynamic function to force CSR for CustomTitleBar.

import dynamic from "next/dynamic";

const DynamicCustomTitleBar = dynamic(() => import("./CustomTitleBar"), {
  ssr: false,
});

export default DynamicCustomTitleBar;

answered Dec 23 '22 at 17:29

C.Tale

263
2
13

1

I'd guess that when the lib `"@tauri-apps/api/window"` is loaded, windows still undefined, that's why you need to ssr the whole component – Kakiz Dec 23 '22 at 17:34

score 1 · Answer 2 · answered Apr 30 '23 at 08:40

Ran into the same problem. Dynamic imports for the appWindow object itself works:

const onClose = React.useCallback(async () => {
  const { appWindow } = await import("@tauri-apps/api/window");
  
  appWindow.close();
}, []);

// Somewhere else

<button onClick={onClose}>
  ...
</button>

If you do not want to wrap your components, this approach works fairly well.

score 0 · Answer 3 · answered Jan 06 '23 at 10:22

How I got around this issue is as follows.

If and when I use any of the @tauri-apps/api exports I wrap them in a component that I then import using the dynamic import flow without ssr. This is mainly to keep my project organized because I just create sort of a wrapper for every function that I might want to use from tauri-apps/api.

So I would make the following folder structure:

 const TauriApiWrapComponent = dynamic(() => import("./TauriApiWrapComponent"), {
  ssr: false,
 });

Window is undefined in NextJS + Tauri

What I'm trying to do:

What the code looks like:

3 Answers3