Develop Reference

Cannot import a node module inside a module web worker on the browser

1- I am trying to import a node module into my worker. I could not find a way to get it done in a straightforward manner. Many people were suggesting using things like webpack or external libraries. Why can't I simply import the node module like a regular js module import like so?
import blazeface from '#tensorflow-models/blazeface';
meanwhile, I can import other modules I created like
import getDetectedFace from "./detectFace.js";
When this error occurs I do not see any output to the console that an error has occurred. I can only tell because my worker does nothing when I try this type of import. Is this normal?

import module without nodejs - vanillaJS

I'm refreshing my old and low knowledge on VanillaJS using the latest best practices i found.
I recently did a tutorial on NodeJS doing API REST with ExpressJs and one with Socket IO.
Now I want to practice a little before going to REACTJS.
So I started a little project
I do one without NodeJs - just JS into HTML view - using Objects.
I want to use modules from Npm. I want to try Fakerjs but when i want to import it i have a 403.
The path is correct, no error.
So i'm wondering if it's possible without Nodejs to import modules when doing VanillaJs?
Am i doing it wrong ?
The structure of the project is :
js/
main.js
class/
node_modules/
index.html
Main.js:
'use strict'
//Importation of modules
import faker from '../node_modules/faker'
//Importation of Class Folder
import { Crypto } from "./class/crypto.class.js";
console.log(faker);
faker.locale = 'en_US';
I have this error in console:
GET http://crypto-market-js.local:8282/node_modules/faker/ net::ERR_ABORTED 403 (Forbidden)
If i write : import faker from 'faker' (like with node js but it's a require instead) i have this : Uncaught TypeError: Failed to resolve module specifier "faker". Relative references must start with either "/", "./", or "../".
If you could give me a hand on that plz :)

Trying to import with require is not supported without NodeJS, because require is a node-specific function. When trying to import modules into Vanilla JS, my recommendation is to first link to ths script with the <script> html tag, and then add another script with import faker from 'faker'
Hope that clarifies your issue.

ES module imports - can it always be done? A failed example trying to import socket.io-client

I'm trying to use a "build-less" process so I'm using a plain module script in an html file (following the Preact docs):
<script type="module">
import {
html,
render,
} from 'https://unpkg.com/htm/preact/index.mjs?module';
function App(props) {
return html`<h1>Hello ${props.name}!</h1>`;
}
render(html`<${App} name="world" />`, document.getElementById('root'));
</script>
I'm able to get the client socket.io working if I by-pass the module system and rely on the window global (note: I'm serving the html file from an http server that's been passed to socket.io's server and have /socket.io/socket.io.js automatically installed):
<script src="/socket.io/socket.io.js"></script>
<!-- in previous module script: -->
const socket = window.io();
socket.on('connect', () => {
console.log('socket id>>', socket.id);
});
I would like to import the socket.io client from an ES module. I know I could encapsulate the window use in my own JS file and then import that in the module script in my html, but I'm trying to do this instead and it isn't working:
import io from '/socket.io.js'; // after copying socket.io.js to my public dir
import { io } from 'https://cdnjs.cloudflare.com/ajax/libs/engine.io-client/3.5.0/engine.io.js'; // I have tried several variations of urls and what is imported
Judging by:
Uncaught SyntaxError: The requested module '/socket.io.js' does not
provide an export named 'default'
and by the "polyfill"ed (if that's the correct term) commonjs globals like module in the probably-webpack bundle which is socket.io.js - it is likely that there just is no support for ES modules for this library.
I will probably be facing this issue over and over so I have decided to go back to having a build step.
My question is - is there a way around this "3rd party libraries not supporting ES module imports out of the box"? Maybe with a little work on my part I can get around this and try completing a small project without a build step in development.

Is there a way around this "3rd party libraries not supporting ES module imports out of the box"?
Unfortunately no, at least not always. It is impossible for a browser to natively import something that is not an ES module. However, if you've got access to the original source code, and the source code itself is written as an ES module (and then transpiled/bundled), you can sometimes build ES modules out of it yourself.
In the case of socket.io, their repo hosts the source code in TypeScript, which makes use of import/export. Unfortunately, their code also makes use of require() and other npm packages, which ultimately means it cannot be trivially converted to an ES module.

Importing Stockfish into React App: Uncaught SyntaxError: Unexpected token '<'

I am trying to import the javascript implementation of stockfish into my react app. I can replicate the above error by adding the following:
let stockfish = new Worker('stockfish.js');
I have already tried to clear my cache and I think that it has to do with how I am loading stockfish.js. To replicate the error, all you have to do is create a new react app using create-react-app, install stockfish and add the above line.
This has been asked before (for example) but I can't find anything that applies to my situation.

I had similar problems, except in a vue app. Here are some suggestions.
Is stockfish.js in your public folder of your project? I had to manually copy stockfish.js, stockfish.wasm and stockfish.asm.js from the stockfish module folding into the project's public folder. Not very NPM friendly.
Try adding '/' to the path. That is,
let stockfish = new Worker('/stockfish.js');
For me this solved a bug where if I called where the if I tried to make a new worker from a component with a route of say "localhost:8080/game/12341234", the request for stockfish would be sent to "localhost:8080/game/stockfish.js" instead of "localhost:8080/stockfish.js".

What is this error that comes up in node.js?

I was trying to follow this tutorial.
Then when I got to this part
node jsctags/bin/jsctags --sort=yes --locals tst.js
I got the following warning message.
The "sys" module is now called "util". It should have a similar
interface.
I'm doing this in OSX. First I tried the package and then I tried installing from source. I still get the same message.
What does this mean? What can I do about it?

In your jsctags file you probably have a line that looks like this:
sys = require ('sys');
As a first step, try using this line:
sys = require ('util');
This will still refer to the package by the name sys in your script, so the rest should work; but in the future, util = require ('util'); might be better, to make it more clear that you're using the newer package and API.

The message is just Node's way of telling your sys module is deprecated and everyone should migrate to util.
The reason you're getting it may not be your fault. If any of the libraries you're using not migrated to the new modules, it'll also show that message.