Error defining {invoke} when developing an app in Rust using Touri and Vite libraries with React, TypeScript + SVG Framework

I am using Tauri in my React project and after setting up all the necessary libraries I encountered an error when trying to use the invoke function from the @tauri-apps/api module. The error reads:

Module "@tauri-apps/api" has no exported member "invoke".

Even though I installed all the required dependencies (e.g. @tauri-apps/api and @tauri-apps/cli), the invoke function is not recognized and throws an error in the browser. Here is my package.json:

{
  "name": "bondify-client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@tauri-apps/cli": "^2.0.2",
    "@types/node": "^22.7.5",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.11.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.4.8"
  }
}

Here is tsx code:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api';


invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

I'm using Node.js version 20.x. What could be the reason why invoke is not recognized?

I already tried to recreate the project from scratch and followed the official Tauri instructions, but the problem persists.

also i tried to use @tauri-apps/api/tauri, @tauri-apps/api/core

Looks like invoke is exported from the core module, so try import { core } from '@tauri-apps/api'; and then core.invoke.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { core } from '@tauri-apps/api';

core.invoke('greet', { name: 'World' })
  .then(console.log);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);