Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
linonetwo opened this issue Feb 9, 2023 · 14 comments
Labels
priority: 2 medium scope: api.js The @tauri-apps/api npm package type: breaking change This issue or pull request will introduce a breaking change and requires major version bump

Comments

@linonetwo
Copy link

linonetwo commented Feb 9, 2023

if ('__TAURI_METADATA__' in window) {

When running headless tests, this might be troublesome.

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

@linonetwo
Copy link
Author

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

@Owez
Copy link

Owez commented Mar 2, 2023

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

image

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 Owez mentioned this issue Mar 2, 2023
@Owez
Copy link

Owez commented Mar 15, 2023

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

@caiocinel
Copy link

The same is also happening here

@amrbashir amrbashir added type: breaking change This issue or pull request will introduce a breaking change and requires major version bump scope: api.js The @tauri-apps/api npm package priority: 2 medium labels Mar 22, 2023
@probablykasper
Copy link
Member

@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
Copy link

Owez commented Mar 23, 2023

@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
Copy link
Member

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

@gentlementlegen
Copy link

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
Copy link

Owez commented May 19, 2023

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

See #6554 (possible workaround also included)

@kaylendog
Copy link

kaylendog commented May 28, 2023

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
Copy link

thenbe commented Jan 2, 2024

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
Copy link
Member

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
Copy link

Same issue while using 2.0.0-beta.

@FabianLars
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority: 2 medium scope: api.js The @tauri-apps/api npm package type: breaking change This issue or pull request will introduce a breaking change and requires major version bump
Projects
Status: 📋 Backlog
Development

No branches or pull requests

10 participants