"navigator is not defined" in Next.js

[laijackylai]

I am trying write a simple app displaying some information but I encountered this error when adding the following function in my index.tsx

import { window } from '@tauri-apps/api'

const openAboutPage = () => {
  const webview = new window.WebviewWindow('about_window', {
    title: "About",
    width: 400,
    height: 200,
    url: '/about'
  })
  webview.once('tauri://created', () => { })
  webview.once('tauri://error', (e: any) => { console.error(e) })
}

The error seem to occur when the webview.once is called

Attached below is the error message

I have also tried importing WebviewWindow directly using the following fashion

import { WebviewWindow } from '@tauri-apps/api/window'

However if I do it this way another error message occurs

error - ReferenceError: window is not defined

my main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]
fn main() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

and package.json for reference

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "tauri": "tauri",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.1.1",
    "@types/node": "18.7.18",
    "@types/react": "18.0.20",
    "@types/react-dom": "18.0.6",
    "eslint": "8.23.1",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.3"
  }
}

please help

[FabianLars]

This is caused by nextjs' SSR nature and an unfortunate design choice of the window module. The workaround is to dynamically import the window module instead so that the code that requires the navigator runs on the client side (btw all tauri apis only work on the client side, but iirc only the window and path modules need dynamic imports).

const openAboutPage = async () => {
  const window = await import('@tauri-apps/api/window')
  const webview = new window.WebviewWindow('about_window', {
    title: 'About',
    width: 400,
    height: 200,
    url: '/about'
  })
  webview.once('tauri://created', () => {})
  webview.once('tauri://error', (e: any) => {
    console.error(e)
  })
}

[laijackylai]

Thank you for your answer, let me try out this approach later

[peabnuts123]

To anybody coming here from Google, I have written a relatively elegant workaround for this if you don't want to use dynamic importants throughout your code. It is a wrapper for the @tauri-apps/api/path module that re-exports the functions as simple async functions that can be used directly. It uses a dynamic import under the hood.

Typescript:

import type * as PathModule from '@tauri-apps/api/path';
type PathModule = typeof PathModule;

/**
 * @NOTE Wrapper for Tauri's `path` module, using a dynamic import to work around
 * Next.js' pre-rendering.
 * Functions are re-exported using a thin type-safe wrapper that resolves the module
 * asynchronously before invoking it.
 */

export const appCacheDir = wrap('appCacheDir');
export const appConfigDir = wrap('appConfigDir');
export const appDataDir = wrap('appDataDir');
export const appDir = wrap('appDir');
export const appLocalDataDir = wrap('appLocalDataDir');
export const appLogDir = wrap('appLogDir');
export const audioDir = wrap('audioDir');
export const basename = wrap('basename');
export const cacheDir = wrap('cacheDir');
export const configDir = wrap('configDir');
export const dataDir = wrap('dataDir');
export const desktopDir = wrap('desktopDir');
export const dirname = wrap('dirname');
export const documentDir = wrap('documentDir');
export const downloadDir = wrap('downloadDir');
export const executableDir = wrap('executableDir');
export const extname = wrap('extname');
export const fontDir = wrap('fontDir');
export const homeDir = wrap('homeDir');
export const isAbsolute = wrap('isAbsolute');
export const join = wrap('join');
export const localDataDir = wrap('localDataDir');
export const logDir = wrap('logDir');
export const normalize = wrap('normalize');
export const pictureDir = wrap('pictureDir');
export const publicDir = wrap('publicDir');
export const resolve = wrap('resolve');
export const resolveResource = wrap('resolveResource');
export const resourceDir = wrap('resourceDir');
export const runtimeDir = wrap('runtimeDir');
export const templateDir = wrap('templateDir');
export const videoDir = wrap('videoDir');

/**
 * Any function that returns type T.
 */
type FunctionWithReturnType<T> = (...args: any[]) => T;

/**
 * All keys of properties on `T` which are functions
 * that return a promise.
 */
type AsyncFunctionsOf<T> = {
  [K in keyof T]: T[K] extends FunctionWithReturnType<Promise<any>> ? K : never;
}[keyof T];


/**
 * Wrap a function within the Tauri `path` API to make it based on a dynamic import,
 * allowing it to be used in a pre-rendered Next.js context.
 * @param fnName Name of the function to wrap
 * @returns Wrapped version of the function that is based on a dynamic import
 */
function wrap<TFunction extends AsyncFunctionsOf<PathModule>>(fnName: TFunction): PathModule[TFunction] {
  // @NOTE some type laundering here, but the API is fully type safe
  return (async (...args: Parameters<PathModule[TFunction]>) => {
    const pathModule = await import('@tauri-apps/api/path');
    const api = pathModule[fnName] as (...args: Parameters<PathModule[TFunction]>) => ReturnType<PathModule[TFunction]>;
    return api(...args);
  }) as unknown as PathModule[TFunction];
}

It can be used exactly as you would normally:

import * as path from '@app/util/path'; // Or whatever, can also import singular functions

// ...

const fileContents = await path.basename(filePath);

vscode is even smart enough to re-export the jsdocs from Tauri: