@tauri-apps/api@1.2.0, "__TAURI_METADATA__" in window cause ReferenceError: window is not defined

[linonetwo]

tauri/tooling/api/src/window.ts

Line 2033 in 50576a5

if ('__TAURI_METADATA__' in window) {

When running headless tests, this might be troublesome.

Should check typeof window !== 'undefined' first.

[linonetwo]

And there will be Cannot use 'in' operator to search for '__TAURI_METADATA__' in undefined if I manually set global.window = undefined

[Owez]

Looks like this is failing my SvelteKit production builds (open image in new window):

This spews out a massive JS chunk for SvelteKit. It mentions tauri at the end:

...b;"__TAURI_METADATA__"in window?b=new s(window.__TAURI_METADATA__.__currentWindow.label,{skip:!0}):(console.warn(`Could not find "window.__TAURI_METADATA__". The "appWindow" value will reference the "main" window label.```

Then it gives a window is not defined:

ReferenceError: window is not defined
    at file:///Users/owen/Projects/yark/yark-pages/node_modules/@tauri-apps/api/chunk-QSWLDHGO.js:1:9678

[Owez]

Still having this issue, here's a complete log if it helps: https://pastebin.com/B2qyqrNc

[caiocinel]

The same is also happening here

[probablykasper]

@Owez @tauri-apps/api does not work with Node.js. With SvelteKit, you should to use adapter-static with the fallback option and set ssr = false

[Owez]

@Owez @tauri-apps/api does not work with Node.js. With SvelteKit, you should to use adapter-static with the fallback option and set ssr = false

I'm using both, the code I wrote had problems with vite's dev ssr on sveltekit erroring so everything I've wrote has been protected inside of an if(browser) as well. For some reason this happens using the static adapter and ssr = false. The issue could be caused by vite trying to run it as node for whatever reason, and then tauri's injected window being ran?

[probablykasper]

ssr = false disables dev SSR. Either way, let's not discuss framework specifics in this issue

[gentlementlegen]

Same here in NextJs. Even wrapping components in dynamic doesn't solve the issue, I need to import any @tauri-apps with await import inside the client code completely. Even if that workaround works, it's pretty tedious to use.

[Owez]

ssr = false disables dev SSR. Either way, let's not discuss framework specifics in this issue

See #6554 (possible workaround also included)

[kaylendog]

For those afflicted by this issue when using rspc with Tauri and NextJS (very specific, I know), I've chucked together a workaround transport that avoids importing Tauri at all during build time and server-side. https://gist.github.com/kaylendog/ea3d2ff8607d8433849c6bd431fb39b0

[thenbe]

For folks using sveltekit and/or vite, one workaround is to use vite-plugin-iso-import.

Before

// src/routes/+layout.ts
import { appDataDir } from '@tauri-apps/api/path'
import { appWindow } from '@tauri-apps/api/window'

// ERROR
// [vite] Error when evaluating SSR module /src/routes/+layout.ts: failed to import "@tauri-apps/api/path"
// ReferenceError: navigator is not defined

After

// src/routes/+layout.ts
import { appDataDir } from '@tauri-apps/api/path?client'
import { appWindow } from '@tauri-apps/api/window?client'

if (!import.meta.env.SSR) {
	console.log({ appWindow, appDataDir })
}
// All good, no error

---

To retain full LSP/intellisense functionality, a couple of steps might be required. One of which is the following:

// src/lib/types/global.d.ts
declare module '@tauri-apps/api/path?client' {
	import all from '@tauri-apps/api/path'
	export = all
}

declare module '@tauri-apps/api/window?client' {
	import all from '@tauri-apps/api/window'
	export = all
}

See the docs for setup info.

This workaround used to be mentioned in the svelte docs, but seems to have missed the cut in a recent docs refactor. Nevertheless, it remains a viable workaround.

[FabianLars]

This was fixed in v2 by removing variables like appWindow and solely relying on functions like getCurrent(). Since this is a breaking change we can't backport it to v1.

Until v2 hits stable you'll have to keep using await import() or workarounds like the one posted above this message.

[bennekrouf]

Same issue while using 2.0.0-beta.

[FabianLars]

@bennekrouf window.__TAURI_METADATA__ does not exist in v2 anymore. Also, all window references that could cause a similar issue should be removed now too.
Please make sure all your tauri related dependencies are updated to v2.

[gknapp]

For folks using sveltekit and/or vite, one workaround is to use vite-plugin-iso-import.

Before

// src/routes/+layout.ts
import { appDataDir } from '@tauri-apps/api/path'
import { appWindow } from '@tauri-apps/api/window'

// ERROR
// [vite] Error when evaluating SSR module /src/routes/+layout.ts: failed to import "@tauri-apps/api/path"
// ReferenceError: navigator is not defined

After

// src/routes/+layout.ts
import { appDataDir } from '@tauri-apps/api/path?client'
import { appWindow } from '@tauri-apps/api/window?client'

if (!import.meta.env.SSR) {
	console.log({ appWindow, appDataDir })
}
// All good, no error

To retain full LSP/intellisense functionality, a couple of steps might be required. One of which is the following:

// src/lib/types/global.d.ts
declare module '@tauri-apps/api/path?client' {
	import all from '@tauri-apps/api/path'
	export = all
}

declare module '@tauri-apps/api/window?client' {
	import all from '@tauri-apps/api/window'
	export = all
}

See the docs for setup info.

This workaround used to be mentioned in the svelte docs, but seems to have missed the cut in a recent docs refactor. Nevertheless, it remains a viable workaround.

I installed vite-plugin-iso-import but the same error remains in my debug/prod installs using tauri 1.6.0: "ReferenceError: window is not defined". The corresponding code in the webview inspector sources tab is:

let appWindow;
if ("__TAURI_METADATA__" in window) {  // this line

[gknapp]

I've been trying to work around this all day, changing my vite config to bundle the app differently. How can I postpone importing the @tauri-apps module so the window object is available? No calls to the rust process work from my web view in debug / production - they work fine in dev though.

A dynamic import of this module, that only mounts my react app once the window is available, hasn't helped. The UI is displayed and MUI works but I can see my application config has failed to load (via an invoke() call to rust). I'm using vite-plugin-iso-import with ?client import paths but that just seemed to move the line reference of the error in the bundle, not actually fix it.

[gknapp]

Tauri 2.0 is still in RC status at this point, will there be a fix to v1? Seems premature to abandon maintenance of the 1x release.

[thenbe]

Aside from my comment above, I don't quite remember the details of how I worked around this. But I do remember that I switched from sveltekit to svelte shortly thereafter, side-stepping this issue entirely.

@gknapp Unless you have specific reasons for using sveltekit with tauri, consider swapping out sveltekit with plain svelte (i.e. an SPA like this: npm create vite@latest myapp -- --template svelte-ts). I've found that, in the context of a desktop tauri app, the baggage brought on by the introduction of a "server" was largely uncalled for.

[FabianLars]

Tauri 2.0 is still in RC status at this point, will there be a fix to v1? Seems premature to abandon maintenance of the 1x release.

v1 is not abandoned... Like i said above, we literally can't "fix" this "issue" in v1 without breaking changes or by introducing new modules in the package that only contain the methods that work in SSR contexts.
I can't tell you why a dynamic import didn't work for you (not a sveltekit user myself), but this is what i've seen pretty much everyone else do to get around this issue, regardless of the framework in use.

[gknapp]

Just to clarify, I'm not using sveltekit, I'm using vite.js.

[gknapp]

Tauri 2.0 is still in RC status at this point, will there be a fix to v1? Seems premature to abandon maintenance of the 1x release.

v1 is not abandoned... Like i said above, we literally can't "fix" this "issue" in v1 without breaking changes or by introducing new modules in the package that only contain the methods that work in SSR contexts. I can't tell you why a dynamic import didn't work for you (not a sveltekit user myself), but this is what i've seen pretty much everyone else do to get around this issue, regardless of the framework in use.

I was just surprised by the error as I thought more devs might have run into it before me. My app has a thin rust layer (mostly for IO) and is primarily built in the web view.

My app doesn't use SSR, I've added vite config params to explicitly disable it. I've run out of options I can think of in my v1 app, so am migrating to v2 to see if can build a debug / production version.

I don't really understand how the window object isn't in scope for @tauri-apps but react and other front-end deps run fine. I've rewritten my entry point so it only dynamically imports @tauri-apps/api once window !== undefined and then calls invoke() for config, then mounts the react UI. The UI renders fine but no config values are available as the IPC call / tauri-apps invoke fails.

[gknapp]

Having upgraded my app to V2 and dug into the issue some more, I found my initial invoke() call was succeeding; followed by the 'window is not defined' error.

I subsequently found I had to dynamically / lazy load monaco editor, another dependency and this resolved the error message.

Update: I backported the lazy load change for monaco editor to my tauri V1 branch, however my debug build still failed so the V2 upgrade was required in addition to the monaco change.