[bug] TypeError: Cannot read properties of undefined (reading '__currentWindow')

[Janaka-Steph]

Describe the bug

Trying to update my app to latest Tauri I get this error TypeError: Cannot read properties of undefined (reading '__currentWindow').

This is all the @tauri-apps/api imports I have in my app:
import { once } from '@tauri-apps/api/event';
import { exit } from '@tauri-apps/api/process';
import type { Child } from '@tauri-apps/api/shell';
import { Command } from '@tauri-apps/api/shell';
import { writeFile, readTextFile, removeFile, readDir, createDir } from '@tauri-apps/api/fs';

I did guard all calls with if ('__TAURI__' in window) { } but it's not enough.

Reproduction

No response

Expected behavior

No response

Platform and versions

▶ cargo tauri info

Operating System - Mac OS, version 12.2.1 X64

Node.js environment
  Node.js - 16.14.0
  @tauri-apps/cli - 1.0.0-rc.5
  @tauri-apps/api - 1.0.0-rc.1

Global packages
  npm - 8.1.4
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-aarch64-apple-darwin 

App directory structure
/node_modules
/public
/scripts
/.github
/src-tauri
/.git
/.idea
/src

App
  tauri - 1.0.0-rc.3
  tauri-build - 1.0.0-rc.3
  tao - 0.6.2
  wry - 0.13.2
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../build
  devPath - http://localhost:3003/
  framework - React
  bundler - Webpack

Stack trace

No response

Additional context

No response

[amrbashir]

Please provide a minimal repro.

[Janaka-Steph]

Hello! I was able to narrow down the problem. It comes from the path module.
In this minimal reporduction made with create-tauri-app I call path.appDir(). You can see in the console the error above.
https://github.com/Janaka-Steph/tauri-app-path

[amrbashir]

Your minimal repro had wrong usage of async function inside jsx.
your App.tsx should be like this

function App() {
  const [appDir, setAppDir] = useState('');
  path.appDir()
    .then(v => setAppDir(v))
    .catch(e => console.error(e));
	
  return <div className="App">
    <p>{appDir}</p> 
  </div>
}

I am not a good react dev so there might be a better way to do this.
Anyways it works fine with the above snippet.

[marc2332]

Just like @amrbashir but a bit better :)

function App() {
  const [appDir, setAppDir] = useState<string | null>(null);
  
  useEffect(() => {
    path.appDir().then(dir => setAppDir(dir));
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <div className="inline-logo">
          <img src={tauriCircles} className="App-logo rotate" alt="logo" />
          <img src={tauriWord} className="App-logo smaller" alt="logo" />
        </div>
        <h1>App Directory</h1>
        <p>{appDir !== null ? appDir : 'loading...'}</p>
      </header>
    </div>
  )
}

[Janaka-Steph]

Unfortunately changing the code like you did didn't solve the issue for me.
I am using a MacBook M1, maybe it's related to that.

[FabianLars]

We're kinda missing the actual problem here. The issue we were initially talking about was that importing X* crashes the frontend in browser even if the function call itself is guarded with if (window.__TAURI__).

• with X now being identified as path.appDir() or the path module in general
  Change it to:

useEffect(() => {
        if (window.__TAURI__) {
            path.appDir().then(dir => {
                console.log('dir', dir);
                setAppDir(dir);
            });
        }
    }, []);

run the app, open it in the brwoser and check the console log

[marc2332]

I believe the issue is:

tauri/tooling/api/src/window.ts

Line 1160 in b10a7cf

const appWindow = new WebviewWindow(

Solution: dynamic import 🤔?

something like:

if (window.__TAURI__){
  const { path } = await import('@tauri-apps/api')
}

or maybe just refactor tauri/api/window to avoid having that module-scoped variable

[Janaka-Steph]

Sorry my issue was not precise enough. I need to be able to run the app in both Tauri and web version.
I added a guard in this repro in useEffect as @FabianLars sugested.
It works with cargo tauri dev but with yarn start I get the error.

[Janaka-Steph]

And as @marc2332 suggested, dynamic import fix the issue.
But would be nice if I can keep regular imports.

  useEffect(() => {
    (async () => {
      if ('__TAURI__' in window) {
        const {path} = await import('@tauri-apps/api')
        path.appDir().then(dir => {
          console.log('dir', dir);
          setAppDir(dir)
        });
      }
    })()
  }, [])

[lucasfernog]

This is a really weird use case lol I thought it was an issue with Tauri itself.

You could move all Tauri API usage to a single file and conditionally import that, I do this at work using Webpack. The easy solution would be changing your HTML file to initialize window.__TAURI_METADATA__ with a dummy value.

[lucasfernog]

We'll help you here #3572