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.

Gradle build failed with Expo eas build beacuse of react-native-google-mobile-ads

Since expo-admob is deprecated I wanted to move to react-native-google-mobile-ads, but I can't even build my project. I used to do it with 'expo build:android', but since we need to build native code I tried eas. With that whenever I try to build my managed workflow project with it get the following error:
[stderr] /home/expo/workingdir/build/android/app/src/main/AndroidManifest.xml:29:85-105 Error:
[stderr] Attribute meta-data#com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT#value value=(true) from AndroidManifest.xml:29:85-105
[stderr] is also present at [:react-native-google-mobile-ads] AndroidManifest.xml:19:13-34 value=(false).
[stderr] Suggestion: add 'tools:replace="android:value"' to <meta-data> element at AndroidManifest.xml:29:5-107 to override.
app.json
{
"expo": {
...
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-************~**********",
"ios_app_id": "ca-app-pub-***********/**********"
}
}
Not sure what to do :/

change com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT value from true to false from androidmanifest file

How to use class when testing with Vue, Cypress and Cucumber?

I am trying to implement something simple: I want my e2e tests run with Cypress and cucumber.
I have an application created with Vue CLI 4.1.1. I added with NPM the package: cypress-cucumber-preprocessor (V1.19.0)
Edit:
After a lot of research and tests, I think I found where the problem comes from, but I don't know how to fix it yet:
The '#vue/cli-plugin-babel/preset' does not seem to be working with
.feature file...
My babel.config.js file is:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Any idea how I can make cli-plugin-babel working with cucumber cypress?
Original message :
I have a Test.feature file, executing steps defined in test.step.js files.
Here is the content of my test.spec.js
import { When, Then } from 'cypress-cucumber-preprocessor/steps';
import { HomePage } from './pages/home.page';
When(/^I open the Home page$/, () => {
let homePage = new HomePage();
homePage.goTo();
});
Then(/^I see "([^"]*)" in the main heading$/, msg => {
cy.contains('h1', msg)
});
And the content of my PageObject home.page.js:
export class HomePage {
goTo() {
cy.visit("/");
}
}
When I run:
npm run test:e2e
I get the following error:
Oops...we found an error preparing this test file:
tests/e2e/features/Test.feature
The error was:
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
- A missing file or dependency
- A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.
These errors does not occur when I use:
export function goToHomePage() {
cy.visit("/");
}
You can checkout my project on Github: https://github.com/truar/cloudcmr-v2 (branch master for the passing case, branch pageObject_pattern for the failing case).
I am assuming this is something related to ES6 and cypress... but I clearly don't know what is going on here. Besides, everything I find on the Internet talks about cypress cucumber and Typescript, which I don't use...
What am I missing?

I found the answer. See this PR for more details : https://github.com/cypress-io/cypress/issues/2945
Basically, there is an incompatibility between Babel 7 and Cypress 3. I had to change the babel.config.js file :
module.exports = process.env.CYPRESS_ENV
? {}
: {
presets: ["#vue/cli-plugin-babel/preset"]
};
It is just a workaround, not a real fix. We have to disable babel when running cypress.
Hope will help you !

Cannot resolve module 'react/lib/merge'

I have a React project, where I am using Babel and Webpack.
In one the files, I have the following require statement:
var merge = require('react/lib/merge');
However, I am getting this error:
ERROR in ./app/stores/CountryStore.js
Module not found: Error: Cannot resolve module 'react/lib/merge'
Is there another way of requiring the component?

'react/lib/merge' is deprecated.
try
npm install merge
and instead of
var merge = require('react/lib/merge');
use
var merge = require('merge');

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");