I'm encountering a problem with Tauri plugins (I'm using Tauri 1.2.2). I've created a basic app with

npx create-tauri-app

with npm as its package manager.

I've left everything the way it was installed, except for the fact that I'm trying to use the Plugin-Log plugin for Tauri. ()

To install it, I've added

tauri-plugin-log = { git = ";, branch = "dev" }

in src-tauri/Cargo.toml, then ran

npm add 

then I updated my main() function in src-tauri/src/main.rs:

use tauri_plugin_log::{LogTarget};
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_log::Builder::default().targets([
            LogTarget::LogDir,
            LogTarget::Stdout,
            LogTarget::Webview,
        ]).build())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

However, when I attempt to import anything (the line of code below was written inside main.js):

import { trace, info, error, attachConsole } from "tauri-plugin-log-api";

I get the following error:

Uncaught TypeError: Failed to resolve module specifier "tauri-plugin-log-api". Relative references must start with either "/", "./", or "../".

Even imports taken straight from the documentation, such as this one, fail:

import { ask } from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');

and result in the same TypeError:

Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/api/dialog". Relative references must start with either "/", "./", or "../".

despite the fact that I've added the following to tauri.conf.json

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "all": true,
        "open": true,
        "save": true
      },
      ...
    }
  }
}

The only workaround for the above problem I have found is this:

const { ask } = window.__TAURI__.dialog;
const yes = await ask('Are you sure?', 'Tauri');

which ends up working.

Unfortunately, I remain at a loss trying to use the Plugin-Log described earlier in this post. I tried using a relative path i.e.

import { trace, info, error, attachConsole } from "../node_modules/tauri-plugin-log-api/dist-js/index.min.js";

but then a new error occurs:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I even tried reproducing the issue in a fresh VM after installing everything and I end up with the same errors.

Could there be something that I'm missing? Please bear with me as I am a literal Tauri noob. Thank you in advance for any replies.

I'm encountering a problem with Tauri plugins (I'm using Tauri 1.2.2). I've created a basic app with

npx create-tauri-app

with npm as its package manager.

I've left everything the way it was installed, except for the fact that I'm trying to use the Plugin-Log plugin for Tauri. (https://github./tauri-apps/tauri-plugin-log)

To install it, I've added

tauri-plugin-log = { git = "https://github./tauri-apps/plugins-workspace", branch = "dev" }

in src-tauri/Cargo.toml, then ran

npm add https://github./tauri-apps/tauri-plugin-log

then I updated my main() function in src-tauri/src/main.rs:

use tauri_plugin_log::{LogTarget};
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_log::Builder::default().targets([
            LogTarget::LogDir,
            LogTarget::Stdout,
            LogTarget::Webview,
        ]).build())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

However, when I attempt to import anything (the line of code below was written inside main.js):

import { trace, info, error, attachConsole } from "tauri-plugin-log-api";

I get the following error:

Uncaught TypeError: Failed to resolve module specifier "tauri-plugin-log-api". Relative references must start with either "/", "./", or "../".

Even imports taken straight from the documentation, such as this one, fail:

import { ask } from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');

and result in the same TypeError:

Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/api/dialog". Relative references must start with either "/", "./", or "../".

despite the fact that I've added the following to tauri.conf.json

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "all": true,
        "open": true,
        "save": true
      },
      ...
    }
  }
}

The only workaround for the above problem I have found is this:

const { ask } = window.__TAURI__.dialog;
const yes = await ask('Are you sure?', 'Tauri');

which ends up working.

Unfortunately, I remain at a loss trying to use the Plugin-Log described earlier in this post. I tried using a relative path i.e.

import { trace, info, error, attachConsole } from "../node_modules/tauri-plugin-log-api/dist-js/index.min.js";

but then a new error occurs:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I even tried reproducing the issue in a fresh VM after installing everything and I end up with the same errors.

Could there be something that I'm missing? Please bear with me as I am a literal Tauri noob. Thank you in advance for any replies.

• javascript
• desktop-application
• tauri

4 Answers 4

Docs aren't updated but you're just missing:

yarn add -D @tauri-apps/api 

I see.you are writing it in this way

import { isPermissionGranted } from '@tauri-apps/api/notification'

Try writing it this way.it fixed for me

const { isPermissionGranted } = window.__TAURI__.notification; 

replace api/notification with .notification.

I have had the same errors when using 'import' declarations from '@tauri-apps/api' using Tauri installed as vanilla JS/CSS/HTML.

The only fix I found was copying my HTML/JS/CSS code into a [vanilla-ts] version of Tauri where it worked as expected.

For people looking for a solution in Tauri v2, things have changed a little if you want to use window.__TAURI__.

As mentioned for example in this doc, you need to set withGlobalTauri to true in the app section of tauri.conf.json.

For example, this allows using: const invoke = window.__TAURI__.core.invoke;

ChatGPT failed to mention that to me.