tauri: [bug] window.__TAURI_IPC__ is not a function

Describe the bug

I followed the documentation to create my first app using: yarn create tauri-app

I receive an error when trying to run a basic echo command.

Thank you.

Reproduction

yarn create tauri-app
Choose Svelte w/ Typescript
cd <app_name>
yarn install
yarn tauri dev
Add the following as code inside the script/main tags:

<script lang="ts">
    import { Command } from '@tauri-apps/api/shell';
    export let name: string;

    const command = new Command('echo', 'message').execute();
</script>

<main>
    <h1>Hello {name}!</h1>
    {#await command}
        <p>waiting...</p>
    {:then output}
        <p>output: {output}</p>
    {:catch error}
        <p style="color: red">{error.message}</p>
    {/await}
</main>

Notice the error printed to the page: window.__TAURI_IPC__ is not a function
Check the window in the console (it doesn’t exist)

Expected behavior

'message' is returned

Platform and versions

> monocole@1.0.0 tauri
> tauri "info"


Operating System - EndeavourOS, version Rolling Release X64

Node.js environment
  Node.js - 17.5.0
  @tauri-apps/cli - 1.0.0-rc.2
  @tauri-apps/api - 1.0.0-rc.0

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

Rust environment
  rustc - 1.58.1
  cargo - 1.58.0

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-unknown-linux-gnu 

App directory structure
/public
/src
/.vscode
/node_modules
/src-tauri

App
  tauri.rs - 1.0.0-rc.1
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../public
  devPath - http://localhost:8080/
  framework - Svelte
  bundler - Rollup

Stack trace

None

Additional context

Firefox 97.0 (64-bit)

Kernel: uname -r > 5.15.21-hardened1-1-hardened

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 25 (11 by maintainers)

Most upvoted comments

Wait a second, I think this is a misunderstanding on my part.

After creating the project and following the instructions to run it, I ran into the error.

The issue is that I was starting the project with yarn run dev. I checked package.json and saw there is a tauri script, and when run, it outputs there is a dev sub-command. Running npm run tauri dev builds and runs the app in a window (rather than the browser), and TAURI exists on the window now.

I see a new error: program not allowed on the configured shell scope: echo; however, I suspect that is corrected in the tauri.conf.json, so I’ll follow the docs from here.

Thank you for your time!

davidhaley on Feb 13, 2022

Me too. I followed a fresh Tauri installation on my Mac, specifying Vue and Typescript frontend npm create tauri-app@latest, installed the npm packages, then ran npm run tauri dev and got the web page appearing ok.

But clicking Greet gives me the same error.

[Vue warn]: Unhandled error during execution of native event handler 
  at <Greet> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:40
chunk-RCPA6UVN.js:1 Uncaught (in promise) TypeError: window.__TAURI_IPC__ is not a function
    at chunk-RCPA6UVN.js:1:542
    at new Promise (<anonymous>)
    at c (chunk-RCPA6UVN.js:1:397)
    at Proxy.greet (Greet.vue:10:26)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (Greet.vue:17:35)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:345:9)

Why would the recommended default app be broken - for over a year now? Am I missing something?

P.S. Then building the app with the recommended npm run tauri build gives me

   Compiling embed_plist v1.2.2
    Finished release [optimized] target(s) in 12m 02s
    Bundling tauri-app-andy.app (/Users/andy/Devel/tauri-electron-alternative/tauri-app/src-tauri/target/release/bundle/macos/tauri-app-andy.app)
    Bundling tauri-app-andy_0.0.0_x64.dmg (/Users/andy/Devel/tauri-electron-alternative/tauri-app/src-tauri/target/release/bundle/dmg/tauri-app-andy_0.0.0_x64.dmg)
     Running bundle_dmg.sh
       Error failed to bundle project: error running bundle_dmg.sh: error running bundle_dmg.sh: `failed to run /Users/andy/Devel/tauri-electron-alternative/tauri-app/src-tauri/target/release/bundle/dmg/bundle_dmg.sh`

Not a good introductory experience. I must have missed something in the installation? I installed cargo and ran all the npm commands and created the default project.

abulka on Mar 25, 2023

Yeah, the tauri scripts are only injected into tauri windows 😃

FabianLars on Feb 13, 2022

Just stumbled across this while using create tauri-app as I ran pnpm dev instead of pnpm tauri dev. I started to think the Greet functionality in the scaffolded app was broken.

I agree that a console error would be valuable, as this was the first place I looked to see what was happening.

I also think it is worth swapping pnpm dev to run tauri by default and change the vite web dev to pnpm vite dev as the fundamental purpose of this is to build a tauri app. I am seeing the same pattern with most of the tauri templates under awesome-tauri.

JameelKhan9 on Sep 27, 2023

If yarn dev has a legitimate use case, then maybe it would be helpful for the project template to be set up so that it demonstrates when/how you would want to use this? Something like “hello from the front end/from WASM” instead of “hello from Rust”.

I am just saying it is an option to have web/tauri-app project from single codebase but the template is tailored towards tauri (with the possiblity for future hybrid project). In addition to that, we still need yarn dev to exist so yarn tauri dev could run it before opening the tauri app.

Maybe the instructions could be more clear, We would love some feedback on how we should make it more clear.

or maybe we could print something before we start vite so that it’s clear that it’s running the front-end only and rust FFI will not work?

It does, the CLI prints

Running beforeDevCommand ('yarn dev')

It might be more powerful/ergonomic to have some fallback for tauri IPC failing in a web app context, so that we don’t need to have multiple code paths in client side code to choose a path based on web app usage vs tauri app usage. This would be well out of scope for this issue though.

What kind of a fallback do you have in mind? because tauri IPC can’t work in a browser at all, it has to be a tauri window.

I think we could maybe try to detect that tauri APIs are loaded on a browser and maybe console.err that tauri APIs doesn’t work in a normal browser and you may have missed a tauri specific guard or just used the wrong npm script.

amrbashir on Apr 14, 2023

I’ve fallen into it as well. As i run yarn dev which starts vite in web browser. I’ve used yarn create tauri-app.

ivanglushko on Apr 4, 2023

After updating to @tauri-apps/api@2.0.0-beta.3 the import fails: import {invoke} from '@tauri-apps/api'

I had to change it to: import {invoke} from "@tauri-apps/api/core"

then it worked.

yerlibilgin on Mar 5, 2024

@bennekrouf Try updating your @tauri-apps/api package (in package.json) to 2.0.0-beta.0.

FabianLars on Feb 14, 2024

We’re not aware of any issues with the templates as long as you use the tauri window. Again, opening the frontend in your default browser is not supported.

If you encounter any issues, please post the following things:

The reproduction steps
The problematic code, at least if it’s not from the starter template - preferably the whole git project
The output of npm run tauri info (swap npm with the package manager you’re using)
A screenshot of the error showing that it’s from inside a tauri window - apologies for requiring this but this is a really common mistake

FabianLars on Mar 31, 2023

This is not a good look for Tauri, since it’s literally supposed to be install, run and play.

dwhyte19 on Mar 31, 2023

This bug still happens with a fresh Tauri installation. (Windows 10, React javascript boilerplate chosen)

Zenahr on Mar 8, 2023