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.

Jest causing a module to disappear

I'm trying to write tests for an old codebase of mine. It uses the isbn package from NPM, which is tiny but does the trick. But whenever I write tests that involve the module, it disappears. That is to say - the value of the module is set to {}.
I've written up two files to try and isolate this issue. I just can't figure out how this test is failing.
First file, isbnTest.js:
const { ISBN } = require("isbn");
function isbnExists() {
return ISBN !== undefined;
}
console.log(isbnExists());
module.exports = {
isbnExists,
};
Pretty simple:
import the module,
one function that just checks if the module has been successfully imported,
log the results, and
export the tester function.
Running this file from the console logs
true
But what happens when we run this code from within Jest?
The second file, ./isbnTest.test.js:
const { isbnExists } = require("./isbnTest.js");
test("isbn should exist", () => {
expect(isbnExists()).toBe(true);
});
When I run npm test with these two files, the test fails.
FAIL
./isbnTest.test.js
✕ isbn should exist (4ms)
● isbn should exist
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
2 |
3 | test("isbn should exist", () => {
> 4 | expect(isbnExists()).toBe(true);
| ^
5 | });
6 |
at Object.<anonymous> (isbnTest.test.js:4:24)
console.log isbnTest.js:7
false
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
It seems as though Jest must be doing some custom importing stuff that's somehow missing this module. Almost like it's being replaced with an empty mock? But I really don't know.
I'd love to remove the isbn package from my program, but without any tests I don't feel confident that I can ensure I won't break anything.
EDIT:
A commenter has pointed out that this doesn't reproduce, which means there's something askew on my machine. Can anyone provide as guess as to what that might be? Deleting and reinstalling the NPM modules doesn't do the trick. I don't think I have any jest config files.
After some further investigation, the problem is being caused by this line in the module:
var exports = typeof window === 'object' && window ? window: module.exports;
If I comment that out, Jest picks it up fine.

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 !

gulp and babel with gulp-live-server

I'm trying to write an express server with ES6 and I'm using Babel to do the transpiling, but I'm having trouble getting it to work with gulp-live-server, as I can't make it restart properly when I change my files.
Currently I have the following:
// gulpfile.babel.js
import gulp from 'gulp';
import gls from 'gulp-live-server';
import babel from 'gulp-babel';
gulp.task('transpile', ['clean:server'], () => {
gulp.src(['server/**/*.js'])
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task('server', ['transpile'], () => {
var server = gls.new('dist/app.js');
server.start();
gulp.watch(['server/**/*.js'], ['transpile']);
gulp.watch('dist/app.js', server.start.bind(server)); //error
});
But it's not working, this code returns a Gaze error:
internal/child_process.js:274
var err = this._handle.spawn(options);
^
TypeError: Bad argument
at TypeError (native)
at ChildProcess.spawn (internal/child_process.js:274:26)
at exports.spawn (child_process.js:339:9)
at Object.exports.start (/Users/oni/Documents/Projects/meanimo/node_modules/gulp-live-server/index.js:134:19)
at Gaze.<anonymous> (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/index.js:18:14)
at emitTwo (events.js:87:13)
at Gaze.emit (events.js:172:7)
at Gaze.emit (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:129:32)
at /Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:415:16
at StatWatcher._pollers.(anonymous function) (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:326:7)
The error has to do with the callback being passed to watch: server.start.bind(server), although that comes straight from the gls documentation...
I don't see my changes reflected and I can't seem to find any documentation on using gls with transpilers.
Please help.

OK I've fixed it and I'll share for posterity: for some reason, you have to wrap the server restart function on another function and execute it yourself. I think is has to do with the way Gaze is wrapping the subprocesses.
gulp.watch('dist/app.js', () => server.start());
That will do the trick.

Compile a Polymer app in Dart

I am using Dart 0.8.10_r30104 (DEV) and find it unable to generate the Javascript (the app itself can run in Dartrium, though).
Errors prompted when I choose to "Generate Javascript" on builder.dart:
--- Nov 12, 2013 7:35:43 AM Running dart2js... ---
F:\dart\dart-sdk\bin\dart2js.bat --out=E:\My Books\Sitepoint\Sample\build.dart.js E:\My Books\Sitepoint\Sample\build.dart
/E:/My Books/Sitepoint/Sample/packages/polymer/builder.dart:83:8: Error: Library not found 'dart:io'.
import 'dart:io';
^^^^^^^^^
/E:/My Books/Sitepoint/Sample/packages/polymer/src/build/linter.dart:11:8: Error: Library not found 'dart:io'.
import 'dart:io';
^^^^^^^^^
/E:/My Books/Sitepoint/Sample/packages/barback/src/asset.dart:9:8: Error: Library not found 'dart:io'.
import 'dart:io';
^^^^^^^^^
...
/E:/My Books/Sitepoint/Sample/packages/analyzer/src/generated/element.dart:7220:17: Hint: The class 'VoidTypeImpl' overrides 'operator==', but not 'get hashCode'.
bool operator ==(Object object) => identical(object, this);
^^
/E:/My Books/Sitepoint/Sample/packages/analyzer/src/generated/element.dart:4874:17: Hint: The class 'PropertyAccessorElementImpl' overrides 'operator==', but not 'get hashCode'.
bool operator ==(Object object) => super == object && identical(isGetter, ((object as PropertyAccessorElement)).isGetter);
^^
Error: Compilation failed.
===
What went wrong?

To generate JS for a polymer app, you need to run "pub build" at the top level of your application. This will create a top level directory called build, which will include your JS (and html that points at the JS).