WebviewWindow open new window get error: Cannot read properties of undefined (reading 'invoke')

[Sylor-huang]

I used tauri v-2.1 + vite + vue + express to create a macOS app, and now I want to use a new window to open https://google.com, but I also get error:

Cannot read properties of undefined (reading 'invoke')

1. package.json:

{
  "name": "xbots",
  "private": true,
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "server": "node src/server/index.js",
    "start": "concurrently \"npm run server\" \"npm run tauri dev\"",
    "build:all": "npm run build && npm run tauri build"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@tauri-apps/api": "^2.1.1",
    "@tauri-apps/plugin-shell": "^2.2.0",
    "axios": "^1.7.9",
    "better-sqlite3": "^11.7.0",
    "cors": "^2.8.5",
    "element-plus": "^2.9.0",
    "express": "^4.21.2",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
    "vue": "^3.3.4",
    "vue-i18n": "^10.0.5",
    "vue-router": "^4.5.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.1.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "autoprefixer": "^10.4.20",
    "concurrently": "^9.1.0",
    "postcss": "^8.4.49",
    "sass": "^1.83.0",
    "tailwindcss": "^3.4.16",
    "unplugin-auto-import": "^0.19.0",
    "unplugin-element-plus": "^0.8.0",
    "unplugin-vue-components": "^0.27.5",
    "vite": "^5.4.11"
  }
}

2. tauri.conf.json

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "X-Bot",
  "version": "0.1.0",
  "identifier": "com.xbots.app",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "X-Bot | v0.1",
        "width": 900,
        "height": 600,
        "resizable": true,
        "url": "index.html"
      }
    ],
    "security": {
      "csp": {
        "default-src": ["'self'"],
        "script-src": ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
        "style-src": ["'self'", "'unsafe-inline'"],
        "connect-src": ["'self'", "*"],
        "img-src": ["'self'", "data:", "https://*"],
        "frame-src": ["'self'", "*"]
      }
    }
  },
  "plugins": {
    "shell": {
      "open": true
    },
    "webview": {
      "windows": ["google"],
      "permissions": ["webview:allow-create-webview-window"]
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

3. vite.config.js

import path, { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

const host = process.env.TAURI_DEV_HOST;
export default defineConfig({
  define: {
    'process.platform': null,
    'process.version': null
  },
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      ignored: ["**/src-tauri/**"],
    },
  },
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      importStyle: 'css',
      useSource: true
    }),
  ],resolve: {
    alias: {
      '~': resolve(__dirname, './'),
      '@': resolve(__dirname, 'src')
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
  },build: {
    minify: 'terser',
    brotliSize: false,
    chunkSizeWarningLimit: 2000,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },optimizeDeps: {
      include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en']
    },
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
        },
      },
    },
  
})

4. tauri-src/src/main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use tauri::Manager;
use std::process::Command;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .setup(|app| {
            tauri::async_runtime::spawn(async move {
                let output = Command::new("node")
                    .arg("src/server/index.js")
                    .output()
                    .expect("Failed to start server");
                println!("Server output: {:?}", output);
            });
            
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

5. Cargo.toml

[package]
name = "xbots"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
# The `_lib` suffix may seem redundant but it is necessary
# to make the lib name unique and wouldn't conflict with the bin name.
# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
name = "xbots_lib"
crate-type = ["staticlib", "cdylib", "rlib"]

[build-dependencies]
tauri-build = { version = "2", features = [] }

[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-shell = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

6. test.vue

<template>
  <div>
    <el-link @click="openInNewWindow" class="mr-4">Open In New Window</el-link>
    <el-link @click="openInBrowser">Open In default window</el-link>
  </div>
</template>

<script setup>
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
import { open } from "@tauri-apps/plugin-shell";
const openInNewWindow = async () => {
  try {
    const webview = new WebviewWindow('theUniqueLabel', {
      url: 'https://github.com/tauri-apps/tauri',
      title: 'Tauri',
      width: 800,
      height: 600,
      resizable: true,
      center: true
    });

    webview.once('tauri://created', function () {
      console.log('webview successfully created')
    });
    
    webview.once('tauri://error', function (e) {
      console.log('error creating webview:', e)
    });

  } catch (error) {
    console.error('Error:', error);
  }
}

// open in default browser
const openInBrowser = async () => {
  try {
    await open("https://google.com");
  } catch (error) {
    console.error("Failed to open in browser:", error);
  }
};
</script>

How can I fixed it so I can use webview to open google.com? Thanks for your help!

[FabianLars]

https://v2.tauri.app/security/capabilities/#remote-api-access

[Sylor-huang]

Thanks so much~

[Sylor-huang]

I found that all I had to do was add these two lines to src-tauri/capabilities/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "shell:allow-open",
    "core:webview:default", // added 
    "core:webview:allow-create-webview-window" // added
  ]
}

[FabianLars]

ohh sorry, misunderstood the problem! Glad you figured it out :)