Navigator not defined with tauri path api | Tauri Apps | Page 1

vestal grail Jun 7, 2024, 1:53 PM

I am posting this to let people know how to solve this issue just in case they run into it.

When using NEXTjs as a front-end for your Tauri application, you cannot use the @tauri-apps/api/path module as a static
import for use in any of your react components.

The reason for this based on the error messages I was getting is due to the fact that the navigator object (which is part of the window object in browsers), is not available during the SSG (Static Site Generation) process while NEXTjs is building. So during build time, the following error is thrown.

Error occurred prerendering page "/classes". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: navigator is not defined
    at E (K:\SOFTWARE-DEV\WORK\MyApp\.next\server\app\classes\page.js:1:8934)
    at 8233 (K:\SOFTWARE-DEV\WORK\MyApp\.next\server\app\classes\page.js:1:9730)
    at Object.t [as require] (K:\SOFTWARE-DEV\WORK\MyApp\.next\server\webpack-runtime.js:1:127)
    at require (K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18365)
    at I (K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94362)
    at K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:96668
    at F._fromJSON (K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:97106)
    at JSON.parse (<anonymous>)
    at O (K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94083)
    at t (K:\SOFTWARE-DEV\WORK\MyApp\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:100582)
 ✓ Generating static pages (8/8)

> Export encountered errors on following paths:
        /classes/page: /classes

I looked into the source code for the appConfigDir function that I was using in the path module but from what I can tell, it only
calls into the rust backend to get the directory path. I could not find anything that shows it is using the window or navigator object.

Nevertheless, to solve the problem, I had to use a dynamic import to get this to work. Testing in the desktop build has shown that it works just fine.

So far, I have only come across this issue with the appConfigDir function. One thing that I think would be helpful which is what I am doing is to create a service to wrap the tauri related api calls to centralize weird issues like this. This will also give you the ability to just lazy load the module one time for performance reasons as well if you want.

#Navigator not defined with tauri path api