We Keep Coding

How to properly import module in javascript with webpack

I've got a file my-class.js
class MyClass {
constructor(container) {
const myElements = container.querySelectorAll(".class");
for (const myElement of myElements) {
myElement.addEventlistener("click", this.doThings.bind(this));
}
}
doThings() {
// do things
}
}
(() => {
for (const of document.querySelectorAll(".class-holder")) {
new MyClass(container);
}
}
that I import in my main.js file with import "./path-to-file/my-class". But I want to export it instead of create a new instance, and then import it in my main.js file.
But if I export with export { MyClass } and then import with import { MyClass } from "./path-to-file/my-class.js", I get MyClass is declared but it's value is never read. And if I try to run it in my main.js file with new MyClass(); I get Cannot read property querySelectorAll of undefined. How can I properly do the import in my main file so that the code in my-class.js runs correctly?

Circular trap in Builder method while implementing in Javascript

I was trying to implement a Builder pattern in Javascript using modularity, where I got caught in a circular dependencies-like situation. My file structure looks something like this,
index.js
import PersonBuilder from "./PersonBuilder.js";
let pb = new PersonBuilder();
let person = pb.lives.in('jaipur').at('ajmer Road')
.age.of(32).build();
Person.js
class Person
{
constructor()
{
this.city = this.street = this.name = "";
this.age = 0;
}
toString(){
return `${this.name} from ${this.city} lives at ${this.street} is ${this.age} years old`;
}
}
export default Person;
PersonBuilder.js
import Person from "./Person.js";
import PersonAgeBuilder from "./PersonAgeBuilder.js";
import PersonAddressBuilder from "./PersonAddressBuilder.js";
class PersonBuilder
{
constructor(person = new Person)
{
this.Person = person;
}
get lives()
{
return new PersonAddressBuilder(this.person);
}
get age()
{
return new PersonAgeBuilder(this.person);
}
build()
{
return this.person;
}
}
export default PersonBuilder;
PersonAddressBuilder.js
import PersonBuilder from "./PersonBuilder.js";
class PersonAddressBuilder extends PersonBuilder
{
constructor(person)
{
super(person);
}
in(city){
this.person.city = city;
return this;
}
at(street)
{
this.person.street = street;
return this;
}
}
export default PersonAddressBuilder;
PersonAgeBuilder.js
import PersonBuilder from "./PersonBuilder.js";
class PersonAgeBuilder extends PersonBuilder
{
constructor(person)
{
super(person);
}
of(age){
this.person.age = age;
}
}
export default PersonAgeBuilder;
When I am calling index.js on my browser I got the following error:
Uncaught ReferenceError: Cannot access 'PersonBuilder' before initialization
at PersonAgeBuilder.js:4
how can I solve this?

How to export an extended class without curly brackets? (Node JS)

My goal is to export an extended class called Entrance without using curly brackets (Let's say subclass).
The problem is I can't access to the subclass while I'm using default keyword on it and the browser gives me an error such as this:
Uncaught SyntaxError: Duplicate export of 'default'
Code:
// terminal.js
export default class Terminal {
constructor(output) {
this.output = output;
console.log(`This is Terminal`);
}
}
export default class Entrance extends Terminal {
constructor(output) {
super(output);
}
ticket() {
console.log(`Ticket please`);
}
}
// human.js
import Entrance from './terminal.js';
class People {
constructor(name, input) {
this.name = name;
this.input = new Entrance(this);
this.input.ticket();
}
}
const guy = new People('james');
Is this type of structure doesn't allow originally? Or did I miss something in the code?
Thanks for listening.

I adapted your project to Node.js because this is easier for testing. In the browser you can still use the .js extension but you need to reference the files as modules, not as scripts.
For Node.js use the extension .mjs for ECMAScript Modules ('import' and 'export' are a feature of ECMAScript modules).
You only need to export the identifiers you reference externally: (the 'Entrance' class).
Use 'node --experimental-modules ./human.mjs' to run it
// terminal.mjs: only 'Entrance' is exported
// no need to export 'Terminal' as long as it's name is not referenced outside
class Terminal {
constructor(output) {
this.output = output;
console.log(`This is Terminal`);
}
}
export default class Entrance extends Terminal {
constructor(output) {
super(output);
}
ticket() {
console.log(`Ticket please`);
}
}
// human.mjs
import Entrance from './terminal.mjs';
class People {
constructor(name, output) {
this.name = name;
this.input = new Entrance(this);
this.input.ticket();
}
}
const guy = new People('james');
If you want to reference also the Terminal class outside, dont use 'default' exports/imports (or create a top level object with Terminal and Entrance as members):
// terminal2.mjs
export class Terminal {
constructor(output) {
this.output = output;
console.log(`This is Terminal`);
}
}
export class Entrance extends Terminal {
constructor(output) {
super(output);
}
ticket() {
console.log(`Ticket please`);
}
}
// human2.mjs: import the whole module under the alias 'term'
import * as term from './terminal2.mjs';
class People {
constructor(name, output) {
this.name = name;
this.input = new term.Entrance(this);
this.input.ticket();
new term.Terminal(this);
}
}
// human3.mjs: using named imports which are directly usable
import { Terminal, Entrance} from './terminal2.mjs';
class People {
constructor(name, output) {
this.name = name;
this.input = new Entrance(this);
this.input.ticket();
new Terminal(this);
}
}
const guy = new People('james');
Now with default exports but encapsulated into a library object. This might be the standard way to do it, but only export the symbols you reference outside:
// terminal4.mjs: using a top level object and a default export
class Terminal {
constructor(output) {
this.output = output;
console.log(`This is Terminal`);
}
}
class Entrance extends Terminal {
constructor(output) {
super(output);
}
ticket() {
console.log(`Ticket please`);
}
}
const myLib = {Terminal, Entrance};
export default myLib;
// or just: export default {Terminal, Entrance};'
// human4.mjs
import term from './terminal4.mjs';
class People {
constructor(name, output) {
this.name = name;
this.input = new term.Entrance(this);
this.input.ticket();
new term.Terminal(this);
}
}
const guy = new People('james');
references:
'export': https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
'import': https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Node.js ECMAScript Modules: https://nodejs.org/api/esm.html

The error is shown because you are exporting both Terminal and Entrance classes as default.
if you need only Entrance class from terminal.js, remove export default from Terminal class.

Typescript - Calling a class exported from another file.

I have a file called searchBar.ts in which contains a init() function that I wish to call in a file called index.ts.
My searchBar.ts file looks like this:
class searchBar {
init() {
console.log('work you C*&*T')
}
}
export let searchBarClass = new searchBar;
I then want to be able to call this function in index.ts. I am currently trying to do this with the below code but init is never found with my intellisense:
import { searchBarClass } from './modules/searchBar';
class Main {
searchBarClass.init()
}
let main = new Main();
export {main}
Later on I then want to wrap the function in a global function that I'll call in the HTML file.
Let me know your thoughts

If you want to export a class and call the init() method on the object instance:
export class SearchBar {
init() {
console.log('work you C*&*T')
}
}
Then accessing it from another file:
import { SearchBar } from './modules/searchBar';
export class Main {
constructor() {
let searchBar = new SearchBar();
searchBar.init();
}
}
let main = new Main();
If you want to access the init() function statically:
export class SearchBar {
static init() {
console.log('work you C*&*T')
}
}
Then accessing it from another file:
import { SearchBar } from './modules/searchBar';
export class Main {
constructor() {
SearchBar.init();
}
}
let main = new Main();

React Native "is not a function"

when i export a class as 'export default AvatarStore;' versus 'export default new AvatarStore();' i get the following error trying to use its methods in other classes... Is using the new syntax correct?
here is the code:
import { List } from 'immutable';
import EventEmitter from 'events';
import Utils from '../utils/Utils.js'
import RestService from '../services/RestService'
import RestCallStatus from '../constants/RestCallStatus'
import Avatar from '../models/Avatar'
const CHANGE_EVENT = 'change';
const TAG = 'AvatarStore';
class AvatarStore extends EventEmitter {
constructor() {
super();
this._populateRestCallStatus = RestCallStatus.NOT_REQUESTED;
this._populated = false;
this._dataStore = List();
}
populate(){
RestService.getAllAvatars(this.handleSuccess.bind(this), this.handleFailure.bind(this));
this._populateRestCallStatus = RestCallStatus.STARTED
}
handleSuccess(serviceName, jsonData){
Utils.logMethod(TAG, 'handleSuccess ' + serviceName);
if(jsonData.length > 0){ this._dataStore = List().clear(); }
jsonData.forEach((entity) => {
this._dataStore = this._dataStore.push(new Avatar(entity))
});
this._populated = true;
this._populateRestCallStatus = RestCallStatus.SUCCESS;
this.emitChange();
}
handleFailure(serviceName, error){
Utils.logMethod(TAG, 'handleFailure');
this._populateRestCallStatus = RestCallStatus.FAILED
console.error(`Server call ${serviceName} failed with error: ${serviceName}!`)
}
getItems(){
//Utils.logMethod(TAG, 'getItems');
return this._dataStore;
}
getItemById(itemId){
return Utils.findArrayElementById(this._dataStore, itemId);
}
getPopulated(){
return this._populated;
}
addChangeListener(callback) {
this.on(CHANGE_EVENT, callback);
}
removeChangeListener(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
emitChange() {
Utils.logMethod(TAG, 'emitChange');
this.emit(CHANGE_EVENT);
}
}
export default new AvatarStore();

export default AvatarStore means that you want to export class. in export default new AvatarStore() case, you export instance of class (object). So you need to use the one it makes sense in your case - use the first if you want to have more instances of AvatarStore, otherwise you can use the second one.
Of course in the first case you need to make new instance somewhere after you import it.