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?

Creating a File that Imports & Immediately Exports Components Again

Not sure why this isn't working. I used to have
// file 1
import Box from '#/components/Box'
import Popup from '#/components/Popup'
const MDXComponents = {
Box,
Popup
}
// using MDXComponents somewhere in file 1
Now I want to outsource the MDXComponents object, as it is getting too big. So I created a new file:
// file 2
import Box from '#/components/Box'
import Popup from '#/components/Popup'
export default {
Box,
Popup
}
And then back in file 1 I do:
// file 1
import * as MDXComponents from './file2'
// using MDXComponents somewhere in file 1
It doesn't let me do this, but I am not sure why?

When you do this:
export default {
Box,
Popup
};
You set the default export to a new object that has 2 properties. You'd need to import like so:
import MDXComponents from './file2';
// And then destructure the object like any normal object.
// You can't do import {} in this case, you get the full object.
const { Box } = MDXComponents;
When you do this:
export {
Box,
Popup
};
You create two named exports that you can import like so:
// import all named exports
import * as MDXComponents from './file2';
// or just one individually
import { Box } from './file2';
For this use-case there's also a shortcut:
export { default as Box } from '#/components/Box';
export { default as Popup } from '#/components/Popup';
// If a module has named exports (not just a default export)
// and you want to export them all:
export * from 'some-module';
// Or just some:
export { someOtherThing } from '#/components/Box';
export { default as Popup, someOtherThing } from '#/components/Popup';

Is it possible to import all classes from a directory and initialise them?

Say this is how my directory tree looks like:
/
Children/
ChildrenIndex.js
Base.js
ChildA.js
ChildB.js
ChildC.js
...
ChildN.js
Main.js
Where any given ChildX.js looks like this,
import Base from './Base.js';
class ChildX extends Base {
constructor(params) {
this.params = params
}
}
export default ChildX
And ChildrenIndex.js looks like this,
export {default as ChildA} from './ChildA.js';
export {default as ChildB} from './ChildB.js';
export {default as ChildC} from './ChildC.js';
...
export {default as ChildN} from './ChildN.js';
Is it possible that I can import all children of Base.js in Main.js and get a list full of instances, each of a child's initialisation? Here is the pseudo code doing what I want:
import { * } from './Children/ChildrenIndex.js'
class Main {
constructor() {
let childConstructors = getAllConstructorsIn('./Children/ChildrenIndex.js');
let children = [];
for (let constrt of childConstructors) {
children.push(new constrt(params));
}
}
}
I can manually do this with import { ChildA, ChildB, ChildC, ... ,ChildN } from './Children/ChildrenIndex.js' and then fill the list like this: [new ChildA(params), new ChildB(params), new ChildC(params), ... , new ChildN(params)]. And, that works fine. However, I want someone to be able to just put an implementation of the Base.js in the children directory in order to add new functionality and not have to worry about then going and writing import statements and initialisation in other parts of the code. I am doing this in the model of a React app if that is relevant.

This should work in Main.js:
import * as Children from "./Children/ChildrenIndex";
Children.ChildA // ChildA component
Children.ChildB // ChildB component

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();

how to use a function from another js file in reactjs?

i have a file something.js which has a function:
someFunction: function(arg1, arg2){
//code blocks
}
In my app.js file i want to call this function in the app class. I have imported the something.js file like this import { someFunction } from './something.js';. Now i am trying to use it in a function in the app class
var res = someFunction("abc", 2);
console.log(res);`
i am getting a error Uncaught TypeError: (0 , _something.someFunction) is not a function
Some help would be appreciated.

You need to write it like this:
something.js file -
module.exports = {
A: funtion(){
},
B: funtion(){
}
}
Then import it like this:
import {A} from 'something';
Or use it like this:
something.js file -
export A(){
}
export B(){
}
Then import it like this:
import {A} from 'something';
Read this article: https://danmartensen.svbtle.com/build-better-apps-with-es6-modules

In order to import something, you need to export it from the other module.
For example, you could export class YourComponent extends React.Component in something.js.
Then in the other file you can import { YourComponent } from './something'
You could, for example, in something.js do something like
const MyClass = {
methodName() { return true; }
}
export { MyClass as default } // no semi-colon
Then in the other file you could
import WhateverIWant from 'something';
WhateverIWant.methodName(); // will return true
Edit:
An in-depth explanation with lots of examples is available here.

You could either do: in your something.js file: module.exports = function(){}..
and in your app.js file:
const functionName = require('./path_to_your_file');
Or export somethingFunction = {} and in app.js:
import { somethingFunction } from './path_to_your_file'
Or last: export default somethingFunction = {} and in app.js:
import whateverNameYouChoose from './path_to_your_file'
Let me know if that did the trick! :)

In your something.js file, you can add export someFunction near the bottom of the file. This will then allow you to import that function using the import { someFunction } from './something.js'; you have earlier.