We Keep Coding

(Tauri) js import not working: "Failed to resolve module specifier"

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.com/tauri-apps/tauri-plugin-log)
To install it, I've added
tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
in src-tauri/Cargo.toml, then ran
npm add https://github.com/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.

How to Use Kuromoji.js in Javascript

I recently installed a package w/ Bower from here: https://github.com/takuyaa/kuromoji.js/
Reading the installation on the github, I basically copied and pasted from the guide:
kuromoji.builder({ dicPath: "../bower_components/kuromoji/dict/" }).build(function (err, tokenizer) {
// tokenizer is ready
var path = tokenizer.tokenize("すもももももももものうち");
console.log(path);
});
However, I do not know what the "kuromoji" should refer to. Here is the obvious error:
Uncaught ReferenceError: kuromoji is not defined
Here is a screenshot of my directory tree:
Not sure how to properly use this.

import kuromoji from 'kuromoji'
That provides the 'kuromoji' object you're trying to reference

Uncaught InvalidData: data did not match any variant of untagged enum ArgsEnum

I'm enthusiastic about Deno so I'm giving it a try. Found a tutorial on building a REST API here.
So, when I'm trying to run it, I get this InvalidData error:
error: Uncaught InvalidData: data did not match any variant of untagged enum ArgsEnum
at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11)
at Object.sendAsync ($deno$/ops/dispatch_json.ts:98:10)
at async Object.connect ($deno$/net.ts:216:11)
at async Connection.startup (https://deno.land/x/postgres/connection.ts:138:17)
at async Client.connect (https://deno.land/x/postgres/client.ts:14:5)
at async Database.connect (file:///Users/svenhaaf/git/deno/logrocket_deno_api/db/database.js:17:5)
Now, it looks to me that something is wrong when trying to connect to the database, but I can't really figure out what.
What does this InvalidData error mean? How should I fix this?
FYI my deno --version prints:
deno 0.42.0
v8 8.2.308
typescript 3.8.3
Code:
I cloned the repo from https://github.com/diogosouza/logrocket_deno_api, and in config.js, I edited line 1 from const env = Deno.env() to const env = Deno.env, since it looks like Deno.env became an object instead of a method.

The tutorial is not using versioned URLs, and deno-postgres version that is being used is not compatible with v0.42.0, since https://deno.land/x/postgres/mod.ts is pulling from master
Change db/database.js to import from https://deno.land/x/postgres#v0.3.11/mod.ts, since v0.3.11 is the correct version for Deno v0.42.0
import { Client } from "https://deno.land/x/postgres#v0.3.11/mod.ts";
Remember to always use the version in the URL if you don't want the code to stop working when a new Deno or package version is released.

"ReferenceError: StackTrace is not defined" in Vue app with "stackdriver-errors-js"

I am trying to integrate the stackdriver-error-js library into my Vue project as a module.
The code and the setup:
in package.json
"stackdriver-errors-js": "^0.2.0"
in bootstrap.js
import errorHandler from './error/error-reporting';
in error-reporting.js
import { StackdriverErrorReporter } from 'stackdriver-errors-js';
let errorHandler;
errorHandler = new StackdriverErrorReporter();
errorHandler.start({
key: "{{.Config.StackDriverApiKey}}",
projectId: "{{.Config.StackDriverProject}}",
service: "{{.Config.GoogleCloudProjectID}}",
version: "{{.Copacknfig.GaeEnv}}",
disabled: false
});
export default errorHandler;
The actual error
The error I got now is (console output and test)
[vue-devtools] Ready. Detected Vue v2.4.2
(function testErrorReporting() {window.onerror(null, null, null, null, new Error('Test: Something broke!'));})();
stackdriver-errors.js:109 Uncaught ReferenceError: StackTrace is not defined
at StackdriverErrorReporter.webpackJsonp.556.StackdriverErrorReporter.report (stackdriver-errors.js:109)
at window.onerror (stackdriver-errors.js:67)
at testErrorReporting (<anonymous>:1:40)
at <anonymous>:1:111
and line (stackdriver-errors.js:109)
...
StackTrace.fromError(err).then(function(stack){
...

If you do not load the stackdriver-errors-concat.min.js file, you also manually need to also the stacktrace-js module.
stackdriver-errors expects a StackTrace object to be present.

Since the library you want to use is experimental, and therefore cannot be used in a production environment, it would be better to use a different library which has been tested and validated for production use.
I suggest using this other library instead, which includes features related to Stackdriver error reporting for Node.js and JavaScript.
First of all, install the dependency by running this command:
npm install --save #google-cloud/error-reporting
This will add the dependency automatically to package.json.
In error-reporting.js, you can add the dependencyby adding this to your code (All the parameters are optional):
var errors = require('#google-cloud/error-reporting')({
projectId: 'my-project-id',
keyFilename: '/path/to/keyfile.json',
credentials: require('./path/to/keyfile.json'),
// if true library will attempt to report errors to the service regardless
// of the value of NODE_ENV
// defaults to false
ignoreEnvironmentCheck: false,
// determines the logging level internal to the library; levels range 0-5
// where 0 indicates no logs should be reported and 5 indicates all logs
// should be reported
// defaults to 2 (warnings)
logLevel: 2,
// determines whether or not unhandled rejections are reported to the
// error-reporting console
reportUnhandledRejections: true,
serviceContext: {
service: 'my-service',
version: 'my-service-version'
}
});
After that, use this code to test if the error is properly reported by Stackdriver:
errors.report(new Error('Something broke!'));
Please be aware that this library is currently on a beta stage, so there might be some changes to it in the future.

how to load electron module in typescript

I try to get the ipcRenderer module from electron in typescript to send informations from the current component to the core and to get informations back to the window (electron-chromium-browser).
All I get is a error "Module not found" by transcoding the ts-code to ES5.
const ipc = require('electron').ipcRenderer;`
Update: The Error is switching between the "Module not found" and this one:
ERROR in ./~/electron/index.js
Module build failed: Error: ENOENT, open '/.../node_modules/electron/index.js'
# ./app/components/search/search.ts 12:10-29
That is from the current electron-api. I have also tried to use the import syntax from typescript but the result is the same.
Than I tried to use the electron.ipcRenderer module in a ES5-file, loaded/linked directly in the html-file.
There it worked. Why?

Solved the problem after 10h searching.
Problem was the webpack-transcoder.
https://github.com/chentsulin/webpack-target-electron-renderer
https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js

Since electron dependency in the browser app is not real, meaning it's not webpacked from node_modules but instead loaded in runtime, the require statement caused errors such as "fs" not found for me.
However you can trick the typescript with this:
if (typeof window['require'] !== "undefined") {
let electron = window['require']("electron");
let ipcRenderer = electron.ipcRenderer;
console.log("ipc renderer", ipcRenderer);
}
Also if you are writing a web app, which only is augmented by electron when it's running inside, this is a better way since you don't have to add electron as a dependency to your webapp just when using the communication parts.

Than I tried to use the electron.ipcRenderer module in a ES5-file, loaded/linked directly in the html-file.
If it works in html but fails in ts it means the error is not in const ipc = require('electron').ipcRenderer;. The error is most likey in the import you have to load your file from html (and not require('electron')).

This solved the problem for me:
You can fix it, just add to the "package.json"
"browser": {
"fs": false,
"path": false,
"os": false }
Source: https://github.com/angular/angular-cli/issues/8272#issuecomment-392777980

You can trick ts with this (dirty hack, but it works):
const { ipcRenderer } = (window as any).require("electron");