index.js of imported npm module myLib
const Mod1 = require('./mod1');
const Mod2 = require('./mod2');
const Mod3 = require('./mod3');
module.exports = {
Mod1,
Mod2,
Mod3,
};
mod1.js
class Mod1 {
constructor(url) {
}
}
file using the above npm module
const Mod1 = require('myLib');
const instance = new Mod1();
This is throwing the following error when trying to run it:
const instance = new Mod1();
^
TypeError: Mod1 is not a constructor
How should I reference the class from a single import index.js so that I may be able to create an instance of the class?
There seems to be a slight mistake in your import, the actual import will be like:
const {Mod1} = require('myLib');
which will pull the class from the file and give it to you (ES6 feature)
you can also do it like:
const Mod1 = require('myLib').Mod1;
hope this helps.
Related
Let's say we are creating a module called app by constructing a new vm.SourceTextModule object:
const context = {
exports: {},
console, // custom console object
};
const sandbox = vm.createContext(context);
const app = new vm.SourceTextModule(
`import path from 'path';
console.log(path.resolve('./src'));`,
{
context: sandbox,
}
);
According to the Node.js documentation to obtain the default export from path module we should "link" the imported dependencies of app module to it.
To achieve this we should pass linker callback to app.link method:
async function linker(specifier, referencingModule) {
// the desired logic...
}
await app.link(linker);
How to implement linker function properly so that we could import path module in newly created app module and use it:
await app.evaluate(); // => /home/user/Documents/project/src
P.S. We are using TypeScript, so I checked if we have installed types for path package.
package.json:
"#types/node": "^17.0.31",
I found https://github.com/nodejs/node/issues/35848 where someone posted a code snippet.
From there I've adapted the following linker callback:
const imports = new Map();
async function linker(specifier, referencingModule) {
if (imports.has(specifier))
return imports.get(specifier);
const mod = await import(specifier);
const exportNames = Object.keys(mod);
const imported = new vm.SyntheticModule(
exportNames,
() => {
// somehow called with this === undefined?
exportNames.forEach(key => imported.setExport(key, mod[key]));
},
{ identifier: specifier, context: referencingModule.context }
);
imports.set(specifier, imported);
return imported;
}
The code snippet from the GitHub issue didn't work for me on Node 18.7.0 as is, because the evaluator callback passed to the constructor of SyntheticModule is somehow called with this set to undefined. This may be a Node bug.
I also cached the imported SyntheticModules in a Map because if they have internal state, creating a new SyntheticModule every time will reset that state.
I need to import a JavaScript module from an in memory variable.
I know that this can be done using SystemJS and Webpack.
But nowhere can I find a good working example nor documentation for the same. The documentations mostly talks of dynamic import of .js files.
Basically I need to import the module like below
let moduleData = "export function doSomething(string) { return string + '-done'; };"
//Need code to import that moduleData into memory
If anyone can point to documentation that will be great
There are limitations in the import syntax that make it difficult to do if not impossible without using external libraries.
The closest I could get is by using the Dynamic Import syntax. Two examples follow: the first one is the original I wrote while the second one is an edit from a user that wanted to modernize it.
The original one:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
var moduleData = "export function hello() { alert('hello'); };";
var b64moduleData = "data:text/javascript;base64," + btoa(moduleData);
</script>
<script type="module">
async function doimport() {
const module = await import(b64moduleData);
module.hello();
}
doimport();
</script>
</body>
</html>
The modernized one:
function doimport (str) {
if (globalThis.URL.createObjectURL) {
const blob = new Blob([str], { type: 'text/javascript' })
const url = URL.createObjectURL(blob)
const module = import(url)
URL.revokeObjectURL(url) // GC objectURLs
return module
}
const url = "data:text/javascript;base64," + btoa(moduleData)
return import(url)
}
var moduleData = "export function hello() { console.log('hello') }"
var blob = new Blob(["export function hello() { console.log('world') }"])
doimport(moduleData).then(mod => mod.hello())
// Works with ArrayBuffers, TypedArrays, DataViews, Blob/Files
// and strings too, that If URL.createObjectURL is supported.
doimport(blob).then(mod => mod.hello())
You will however notice that this has some limitations on the way the import code is constructed, which may not precisely match what you need.
The simplest solution is probably to send the code of the module on the server for it to generate a temporary script to be then imported using a more conventional syntax.
let moduleData = await import("data:text/javascript,export function doSomething(str) { return str + '-done'; }");
and to test it
moduleData.doSomething('test');
Use nodejs flag --experimental-modules to use import ... from ...;
node --experimental-modules index.mjs
index.mjs:
import fs from 'fs';
let fileContents = "export function doSomething(string) { return string + '-done'; };"
let tempFileName = './.__temporaryFile.mjs';
fs.writeFileSync(tempFileName, fileContents);
console.log('Temporary mjs file was created!');
import(tempFileName)
.then((loadedModule) => loadedModule.doSomething('It Works!'))
.then(console.log)
Further reading here
How It Works:
I first create the file with fs.writeFileSync
then I use import method's promise to load module and
pipe doSomething method call with "It Works!"
and then log the result of doSomething.
Credits: https://stackoverflow.com/a/45854500/3554534, https://v8.dev/features/dynamic-import, #Louis
NodeJS:
// Base64 encode is needed to handle line breaks without using ;
const { Module } = await import(`data:text/javascript;base64,${Buffer.from(`export class Module { demo() { console.log('Hello World!') } }`).toString(`base64`)}`)
let instance = new Module()
instance.demo() // Hello World!
You can create component and Module on fly. But not from string. Here is an example:
name = "Dynamic Module on Fly";
const tmpCmp = Component({
template:
'<span (click)="doSomething()" >generated on the fly: {{name}}</span>'
})(
class {
doSomething(string) {
console.log("log from function call");
return string + "-done";
}
}
);
const tmpModule = NgModule({ declarations: [tmpCmp] })(class {});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule).then(factories => {
const f = factories.componentFactories[0];
const cmpRef = this.container.createComponent(f);
cmpRef.instance.name = "dynamic";
});
Here is the stackblitz
Based on Feroz Ahmed answer, here is a specific example to dynamically load a Vue 3 component from the server via socket.io.
Server-side (Node + socket.io)
socket.on('give-me-component', (data: any, callback: any) => {
const file = fs.readFileSync('path/to/js/file', 'utf-8');
const buffer = Buffer.from(file).toString('base64');
callback(`data:text/javascript;base64,${buf}`);
});
Client-side (Vue 3 + socket.io-client)
socket.emit('give-me-component', null, async (data: any) => {
// Supposes that 'component' is, for example, 'ref({})' or 'shallowRef({})'
component.value = defineAsyncComponent(async () => {
const imp = await import(data);
// ... get the named export you're interested in, or default.
return imp['TheNamedExport_or_default'];
});
});
...
<template>
<component :is="component" />
</template>
For some weird reason, the suggested way of dynamically import()-ing a "data" URL throws an error: TypeError: Invalid URL when done from an npm package code.
The same "data" URL import()s without any errors from the application code though.
Weird.
const module = await import(`data:text/javascript;base64,${Buffer.from(functionCode).toString(`base64`)}`)
<script type="module">
import { myfun } from './myModule.js';
myfun();
</script>
/* myModule.js */
export function myfun() {
console.log('this is my module function');
}
I'm trying to use the ES6 import syntax and keep running into errors.
This is my data type,
class UnionFind{
constructor(n){
this.items = n;
}
union(p, q){
}
connected(p, q){
}
find(p){
}
count(){
}
}
export default UnionFind
Saved in a file UnionFind.js
This the calling client,
import { UnionFind } from './unionFind';
const readline = require('readline');
const rl = readline.createInterface({
input:process.stdin,
output:process.stdout,
terminal:false
});
uf = new UnionFind(10)
rl.on('numbers', function (line) {
arr = number.split(' ')
console.log(arr);
});
This is saved in a file client.mjs
This is how I'm running it,
node --experimental-modules union-find/client.mjs
I get the following error,
(node:13465) ExperimentalWarning: The ESM module loader is experimental.
file:///Users/mstewart/Dropbox/data-structures-algorithms-princeton/union-find/client.mjs:1
import { UnionFind } from './unionFind';
^^^^^^^^^
SyntaxError: The requested module does not provide an export named 'UnionFind'
at ModuleJob._instantiate (internal/modules/esm/ModuleJob.js:89:21)
at <anonymous>
What am I doing wrong here?
In this case, use
import UnionFind from './UnionFind.js';
if you declared
export class UnionFind{ ....
then you use
import { UnionFind } from './UnionFind.js';
Also take a look at the file name: UnionFind.js . You are using './unionFind'. This is case sensitive
As you know, it's possible to access to exported variables and functions of the main js-file in the module, e. g.:
module1.js
export const MODULE1_CONSTANT1 = 'Test Const From the module1.js';
main.js
import { MODULE1_CONSTANT1 } from './module1';
console.log(MODULE1_CONSTANT1);
However: is it way to access to the main.js variables from the module1.js? I suppose, the answer will be same, so is it possible to exchange by variables between modules?
I know that it's not only JavaScript matter and project build system has the influence too, so let's consider Webpack in this question.
Use keyword require replace keyword import(because import MUST in top of source, it is ES6 syntax), and make a function to access each module, I think it can implement variables exchange between modules.
// module1.js
export const MODULE1_CONSTANT1 = 'Test Const From the module1.js';
export function MAIN_CONSTANT1() {
return require('./main').MAIN_CONSTANT1;
};
// main.js
export const MAIN_CONSTANT1 = 'Test Const From the main.js';
export function MODULE1_CONSTANT1() {
return require('./module1').MODULE1_CONSTANT1;
};
// hello.js
import {MAIN_CONSTANT1 as main_MAIN_CONSTANT1, MODULE1_CONSTANT1 as main_MODULE1_CONSTANT1} from './main';
import {MAIN_CONSTANT1 as module1_MAIN_CONSTANT1, MODULE1_CONSTANT1 as module1_MODULE1_CONSTANT1} from './module1';
console.log('main_MAIN_CONSTANT1', main_MAIN_CONSTANT1);
console.log('main_MODULE1_CONSTANT1', main_MODULE1_CONSTANT1());
console.log('module1_MAIN_CONSTANT1', module1_MAIN_CONSTANT1());
console.log('MODULE1_CONSTANT1', module1_MODULE1_CONSTANT1);
// output
// >>> MAIN_CONSTANT1 Test Const From the main.js
// >>> MODULE1_CONSTANT1 Test Const From the module1.js
// >>> module1_MAIN_CONSTANT1 Test Const From the main.js
// >>> module1_MODULE1_CONSTANT1 Test Const From the module1.js
I am looking to create a Modules system within my Application. I'm unsure on how to implement the following:
Module 1
class SomethingModule {
}
export default SomethingModule;
Module 2
class SomethingElseModule {
}
export default SomethingElseModule;
Module Loader
class ModuleLoader {
load(module) {
// "module" could be "Something" which should create a
// new instance of "SomethingModule"
module = module + 'Module';
// Require and create an instance of "module"
}
}
export default ModuleLoader;
Main File
var ModuleLoader = require('./ModuleLoader');
var loader = new ModuleLoader();
loader.load('SomethingElse');
I'm pretty new to modularised JavaScript and have no idea if this is even possible/feasible. If not, is there a way of doing this you'd suggest without polluting the global namespace and referencing window[moduleName]?
If I understand well your problem, you can create a Map and load your module in there:
class ModuleLoader {
constructor() {
this._modules = new Map();
}
load(module) {
// you should check if the module exist in a good world to not get any error
// and probably adjust the path of what you are requiring
this._modules.set(module, new require(`${module}Module`));
}
getModuleByName(name) {
return this._modules.get(name);
}
}
Edit: To make it work with browserify, you will need to have this list of all the modules somewhere. You can create a separate file ModuleBag like this:
//moduleBag.js
import yourModule from './yourModule';
import yourSecondModule from './yourSecondModule';
var map = new Map();
map.set('yourModule', yourModule);
map.set('yourSecondModule', yourSecondModule);
export default class map;
//moduleLoader.js
import moduleBag from './moduleBag';
class ModuleLoader {
constructor() {
this._modules = new Map();
}
load(module) {
var mod = moduleBag.get(module);
this._modules.set(module, new mod());
}
getModuleByName(name) {
return this._modules.get(name);
}
}
or just put it in the same file.
With this, browserify will be able to load all the necessary files.