Develop Reference

what's the difference between import "name" from "module" and import * as "name" from "module"?

The code on my app is like this.
import { HttpExceptionFilter } from './common/exceptions/http-exception.filter';
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '#nestjs/common';
import { DocumentBuilder, OpenAPIObject, SwaggerModule } from '#nestjs/swagger';
//1.
import * as expressBasicAuth from 'express-basic-auth';
//2.
//import expressBasicAuth from 'express-basic-auth'; => promise unhandled error
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalPipes(new ValidationPipe());
app.useGlobalFilters(new HttpExceptionFilter());
app.use(
['/docs', '/docs-json'],
expressBasicAuth({
challenge: true,
users: {
[process.env.SWAGGER_USER]: process.env.SWAGGER_PASSWORD,
},
}),
);
};
I want to know the difference between 1 and 2.
Because When I run my app using 2(9 lines), there was promise unhandled error.
I want to know how those two ways work. I referred to the official document of mozilla, but I couldn't understand it well.
I'd appreciate it if you could answer me.

First let's just understand how imports works
so consider i have a file with the following exports
// file name -> modules
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;
export default (x, y) => x * y;
now i can import all these functions on another file like this
import defaultFunction, { add, subtract } from './modules.js';
console.log(add(1, 2)) // 3
console.log(subtract(2, 1)) // 1
console.log(defaultFunction(2, 2)) // 2 * 2 = 4
or i can use import * as <name> from <file/package> to import all the exports inside a file.
like this
import * as myModules from './modules.js';
// NOTE: this will only give you add and subtract functions but not the default one
// now to actually access the default function you have to use
// import * as <name> from <file/package>
// <name>.default to access the default export
// or simply
// import default, { } from <file/package>
console.log(myModules.add(1, 2)) // 3
console.log(myModules.subtract(2, 1)) // 1
console.log(myModules.default(2, 2)) // 2 * 2 = 4
// or i can destructure the "myModules" import
const { add, subtract } = myModules;
Conclusion
I think the problem is that the library that you're using is not providing a default export to actually use import expressBasicAuth from 'express-basic-auth'; or it might be exporting different functions for named exports and default exports

As per your code:
import * as expressBasicAuth from ...
Imports all export const variable1...; export const variable2...; items as a single item.
import expressBasicAuth from ...
Imports a single export default item if there was one defined inside the library.
Depending on the library implementation, there might be totally different functions exported in those two ways.

Most of the time, the module exports multiple things
There are two great ways to import from another module when the module exports an object with properties. This is the common case.
Import the whole module, giving it a name:
import * as child_process from "child_process";
// then later...
child_process.spawn(...);
or pick the names you want to import:
import { spawn } from "child_process";
// then later
spawn(...);
sometimes the module exports just one thing. typescript has the concept of export default
If a module declares a default export, then you must bring it in like this:
import thing from "thing";
Now you have a function or a class (whatever its default export is) in the thing.
More commonly in JavaScript (CommonJS?) modules, a module author will override module.exports to a function or class instead of adding properties to the exports object like a ES-module would.
so in common js we have
const expressBasicAuth = require(express-basic-auth);
and in typescript :
import * as expressBasicAuth from 'express-basic-auth';

Export function not working in JavaScript

I have been working on a shopping list application in React but have ran into a problem with exporting a regular JavaScript function from a file called webscrape.js into my react App.js I have tried multiple different ways of exporting but I keep getting this error.
Thanks to any help in advance.
Module not found: Can't resolve 'readline' in
'C:\Users\USERNAME\Desktop\Programming-Projects\Counter
App\counter-app\node_modules\puppeteer\lib\cjs\puppeteer\node'
This is the end of my webscrape file where I export a test function
function testExport(){
console.log("Test Export");
}
function testExport2(){
console.log("Test Export 2");
}
export {testExport, testExport2}
This is the start of my App.js where I import and try using the function
import NavBar from "./components/navbar";
import PriceBar from "./components/pricebar";
import "./App.css";
import Counters from "./components/counters";
import fs from 'fs';
import data from "./shoppingData.json";
import {testExport, testExport2} from "./webscrape.js";
//test export
testExport();

You should use export default {testExport, testExport2}.
But, looking throught your errors, seems like the error it's related to puppeter. Do you have puppteer added to your node_modules? Did you make a npm i?

Try:
export const testExport = () => {
console.log("Test Export");
}
export const testExport2 = () => {
console.log("Test Export 2");
}

Export a function from a JavaScript file

I am trying to make a component in React that is just a function
import React from "react";
function TableSortFunction(data, method, column) {
const newList = [];
for (let i; i <= data.length; i++) {
newList.push(data[i].column);
}
console.log(newList), data, method, column;
return newList;
}
export default TableSortFunction;
I am importing my function in another component like this
import { TableSortFunction } from "./TableSortFunction";
but I get an error saying:
Attempted import error: 'TableSortFunction' is not exported from './TableSortFunction'.
How do I export a js file that is just a function?

Since you export it as default you have to import it like so:
import TableSortFunction from "./TableSortFunction";
Edit: Another issue with your code is that the following is not syntactically correct.
console.log(newList), data, method, column;
Try this instead:
console.log(newList, data, method, column);

Try this
import TableSortFunction from "./TableSortFunction";
Your console isn't correct
instead of
console.log(newList), data, method, column;
should be
console.log(newList, data, method, column);
There are two types of import - named and default.
Export and Import function
Export from - say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};
Import from - say.js to main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
for better understanding, you can refer to articles.
Export and Import
Named Export vs Default Export in ES6

NodeJS - Import order

I do not understand how nodejs resolves import statements. I constantly get the cannot import before initialization error.
For example, I have a init module, which exports an async function and a couple of constants that it creates.
import init, { DATA_VALIDATION_POOL, QUEUE_POOL, IS_REPLAY_POOL } from './init.js';
and then app.js waits for the init function to run. init.js itself has imports as well, and some of them resolve and some of them fail. I do not understand why some fail and some import properly.
In this example, everything to the point of importing from ./utils/pool.js is working fine, but for whatever reason, it cannot import the contents of ./utils/dash.js.
./utils/dash.js doesn't import anything from ../init.js
init.js
...
// CREATE POOLS
...
export const QUEUE_POOL = createPool('QUEUE_POOL');
// EMOJI INTERACTIONS
...
registerEmojiInteraction(QUEUE_POOL, {
...
onAdd: goToPrevPage,
});
const init = async () => {
...
await createCoaches(allCoachIds);
};
import { rankEmojis, raceEmojis, vsRaceEmojis } from './Emojis.js';
import { registerEmojiInteraction, onAddHelper } from './utils/emojiInteraction.js';
import { createPool } from './utils/pool.js';
import {
finishedCoachingStudent,
goToPrevPage,
selectStudent,
goToNextPage,
} from './utils/dash.js';
import { createCoaches } from './utils/coach.js';
export default init;

How to import from module

One library exports its function in such way:
export {
default,
sitemapBuilder,
routesParser,
pathsFilter,
paramsApplier,
} from './lib';
I would like to import them by single line:
import { Sitemap, routesParser } from 'react-router-sitemap';
But it doesn't work, Sitemap and routesParser are undefined.
From their guide:
import Sitemap from 'react-router-sitemap';
import { routesParser as parseRoutes } from 'react-router-sitemap';
Sitemap is class
routesParser is function
Actual result:
Sitemap loaded ok
parseRoutes is undefined

Try like this to import in single line
import Sitemap, { routesParser } from 'react-router-sitemap';

Import everything like below,
import * as parseRoutes from 'react-router-sitemap';
eg: console.log(parseRoutes.sitemapBuilder());
Or Import something like below,
import { sitemapBuilder, routesParser } from 'react-router-sitemap';