如何解决 window 在 tauri 中未定义的问题？

Question

I am new at tauri and I have faced the issue with getting data from @tauri-apps/api.

"@tauri-apps/api": "^1.1.0",
"@tauri-apps/cli": "^1.1.1"

This is my React code below:

/index.jsx

import {getTauriVersion} from "@tauri-apps/api/app"
function App() {
   const func = async () => {
       const res = await getTauriVersion()
       return res    
   }
   return (<></>)
}

This is my tauri.conf.json

{
   "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  ...
  "tauri": {
     "allowList": {"all": true}
  }
}

And the error is:

Uncaught (in promise) TypeError: window.__TAURI_IPC__ is not a function
unhandledRejection: ReferenceError: window is not defined
at o (file:///C:/test/test/node_modules/@tauri-apps/api/tauri- 
a4b3335a.js:1:100)

Answer 1

The typical 2 sources for this kind of error are:

1. you're in a SSR environment - This could be a problem with next.js for example, but not with plain React.
2. you're viewing the frontend in your browser - Tauri's APIs are only injected into actual Tauri windows.

Answer 2

You can write a function to judge

const handleIsTauri = () => {
    return Boolean(
  typeof window !== 'undefined' &&
  window !== undefined &&
  window.__TAURI_IPC__ !== undefined
)};