Using dgram module into browser application - node.js

I'm building a web application that use a module that require the dgram module of nodejs, I have to run this application in a browser, but when I try to build it with webpack, it return me errors on the dgram module:
ERROR in C:/Users/Sibo//coap/lib/agent.js
Module not found: Error: Cannot resolve module 'dgram' in C:\Users\Sibo\node_modules\coap\lib
# C:/Users/Sibo//coap/lib/agent.js 12:22-38
ERROR in C:/Users/Sibo//coap/lib/server.js
Module not found: Error: Cannot resolve module 'dgram' in C:\Users\Sibo\node_modules\coap\lib
# C:/Users/Sibo//coap/lib/server.js 11:22-38
Do you know a way to solve this problem?

It's not possible to use dgram in browser for normal sites. It is possible however for Chrome Apps using chrome-dgram.
The only solution to error you're getting is adding node configuration to your Webpack config:
node: {
dgram: 'empty'
}

dgram is basically a node.js core module, and hence you wont be able to use this on browser end.
However, there is a browser equivalent verion of drag module available. See if that is useful for you. If useful, try this
resolve: {
alias: {
dgram: "dgram-browserify"
}
}

Related

Module not found: Can't resolve 'child_process', Module not found: Can't resolve 'http2'

I am trying to create a web-page using nodeJS and nextJS that stores documents on google drive. For this I installed the NPM module "googleapis" but when I import this module in my particular JS file it throws an error as mentioned below,
./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'
Import trace for requested module:
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
To solve this error I have tried the below solution and this method resolved my issue, I have added this below solution in next.config.js
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
fs: false,
path: false,
child_process: false,
}
}
return config
},
This solution solved my issue but throws another error as mentioned below,
./node_modules/googleapis-common/build/src/http2.js:16:0
Module not found: Can't resolve 'http2'
Did you mean './http2'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
Import trace for requested module:
./node_modules/googleapis-common/build/src/apirequest.js
./node_modules/googleapis-common/build/src/index.js
./node_modules/googleapis/build/src/index.js
This http2 module is deprecated by NPM.
How to resolve this http2 module issue or does anyone know that how to tackle this child_process issue?

Cannot use import statement outside a module with #pusher/push-notifications-web nodejs - beams

I am trying to follow this tutorial using nodejs and express: https://pusher.com/docs/beams/reference/web/#npm-yarn
First I did: npm install #pusher/push-notifications-web before adding the code.
But when I add this code in the index.js file:
import * as PusherPushNotifications from "#pusher/push-notifications-web";
const beamsClient = new PusherPushNotifications.Client({
instanceId: "<YOUR_INSTANCE_ID_HERE>",
});
beamsClient.start().then(() => {
// Build something beatiful 🌈
});
I get this error:
SyntaxError: Cannot use import statement outside a module
It's also not very clear to me from the tutorial if the code has to be in the frontend or the backend. I tried both but got the same result.
How can I fix this problem?
The error is caused by the fact that you're trying to use ES module specific features in a regular CommonJS file (the default behavior in Node.js). However, what you're looking at is the Web SDK for Pusher which won't help you achieve your goals.
You need the server SDK for Node.js - https://pusher.com/docs/beams/reference/server-sdk-node/.
Verify that you have the latest version of Node.js installed and you have 2 ways of fixing that
Set "type" field with a value of "module" in package.json. This will ensure that all .js and .mjs files are interpreted as ES modules.
// package.json
{
"type": "module"
}
Use .mjs as file extension instead of .js.

Module not found: Error: Can't resolve 'fs' when trying to use a NodeJS library

I initiated a basic ReactJS app using npx create-react-app, then I ejected using npm run eject. Now when I am trying to import the Casual library by import casual from 'casual';, I get the following error:
Compiled with problems:
ERROR in ./node_modules/casual/src/casual.js 3:13-37
Module not found: Error: Can't resolve 'fs'
in '/home/me/project/node_modules/casual/src'
And the code around line number 3 in casual.js looks like this:
var helpers = require('./helpers');
var exists = require('fs').existsSync;
var safe_require = function(filename) {
if (exists(filename + '.js')) {
return require(filename);
}
return {};
};
...
I found answers to similar questions. Those were mainly Node or Angular related. I also tried answers suggesting some changes in webpack config, but no luck.
The reason is Casual doesn't work on the front end. It runs on Node.js only.
You need to install maybe a new package to make things work.
Fs is unavailable on the browser so it won't work. Instead, you should use casual-browserify, it will work on browsers.

Use worker_threads in combination with node (v11.15.0), webpack and typescript -> module not found

I'm writting a NodeJS application where I want to use worker_threads to get rid of a blocking I/O call _mfrc522.findCard() by a third party module (mfrc522-rpi) which delays the request handling of a WebApi in the same application.
When I try to reference the worker_threads module in my TypeScript file I get the following WebPack error message:
const { Worker } = require('worker_threads');
ERROR in ./core/command-processing/rfid-command-processor.ts
Module not found: Error: Can't resolve 'worker_threads' in '/home/pi/leabox/src/core/command-processing'
# ./core/command-processing/rfid-command-processor.ts 11:19-44
# ./core/leabox-controller.ts
# ./index.ts
But I'm able to execute the following command directly:
node -e "require('worker_threads'); console.log('success');
Output:
success
Node version: 11.15.0
WebPack version: 4.41.2
TypeScript version: 3.6.4
Activating experimental worker support for node.js via the command line before starting the application solved the issue for me:
export NODE_OPTIONS=--experimental-worker
Please check this thread for further information.

Writing WebSocket client with TypeScript running both on browser and Node.JS

I am writing a typescript code that would run in a web-browser and would be tested with Node.JS.
My client code looks like below.
import * as WebSocket from 'ws';
export class SomeClient {
constructor(url) {
this.ws = new WebSocket(url);
}
send(data: any) {
this.ws.send(data);
}
}
I had no problem in writing a unit test code using mocha/chai.
However, trying to bundle this code, browserify includes all the 'ws' node module and the size of the output file is almost 100kb. If I remove the import 'ws' statement, the bundle file size shrinks less than 1kb. But, in this case, the Node.JS test complains with 'WebSocket is not defined' error.
I think, this is because WebSocket is natively supported in web browsers but not supported in Node.JS and the external 'ws' module is required to run properly.
How can I make a bundle with the minimum size for web browsers yet can use in Node.JS???
Try isomorphic-ws:
npm i isomorphic-ws -s
or universal-websocket-client:
npm install --save universal-websocket-client
I struggled with the same problem, best solution I could find was to use isomorphic-ws create a decs.d.ts in my typescript rootDir with the following content
declare module "isomorphic-ws";
and then use it inside typescript like that:
import { IsoWebSocket } from "isomorphic-ws";
var ws = new IsoWebSocket("wss://echo.websocket.org") as WebSocket;

Resources