We Keep Coding

How to configure a package to export subdirectory in reactjs?

Currently, I have a common package where the components are exported as Named export like so in the src/index.js
export ComponentA from './ComponentA'
export ComponentB from './ComponentB'
In a different project where this is a dependent package I am importing it as
import { ComponentA, ComponentB } from 'my-package';
instead, I need to import it like
import ComponentA from 'my-package/ComponentA'
This is so that I can use react.lazy() and use it as
const LazyComponentA = React.lazy(()=> import('my-package/ComponentA'))
This is under the assumption that if I lazyload the component like this it would only download ComponentA and not the others from 'my-package' Package.
Thanks in advance

In my-package/ComponentA add index.js file with your imports:
// my-package/ComponentA/index.js
import { ComponentA } from "./some-path";
export default ComponentA;

How can components be imported with "import * as {name}" syntax in react native?

In a react-native project, I would prefer to be able to import all my component like I do with types in my reducers.
I want to be able to write:
import * as Components from '../components'
so I went to my components folder, created an index.js file, imported all the basic components, and exported them like export const ComponentExample1 = ComponentExample1 & export const ComponentExample1 = <ComponentExample/>. I figured there might be some naming related errors and thats what seems to have happened because I get the error:
Error: TransformErro SyntaxError: ......index.js: Identifier "ComponentExample1" has already been declared
All of my basic components are exported intra-component as export default ComponentExample1
How can I change my approach to effect my end desire?

You can re-export your default exported components in index.js
Example:
export { default as RoundButton } from './RoundButton'
export { default as Logo } from './Logo'

Delete
export const ComponentExample1 = ComponentExample1
and only keep
export const ComponentExample1 = <ComponentExample />

ES6 - exporting named export without importing them?

Let's assume I have a folder with two files called ModuleA.js and ModuleB.js that looks like this:
ModuleA.js
export default {
someKey: 'Hello, world',
};
ModuleB.js
export const foo = 'bar';
export const another = 'variable';
Then I have an index.js file that I would like to perform named export on those modules without writing the import statement. I know how to do it with ModuleA:
export { default as ModuleA } from './ModuleA';
But how can I import the name exports and export them in one line without writing e.g.?
import * as _ModuleB from './ModuleB'
export const ModuleB = _ModuleB;

You can only reexport everything:
export * from "./ModuleB";
But you can't group that under a new namespace without importing & exporting. There is a proposal to change that.

ES6 import in for-of-loop

Is there any way to import and export multiple files using for-of-loop (or another loop) in ES6?
const moduleNames = ['NumberUtils', 'StringUtils', 'ArrayUtils', 'MyModule', 'AnotherModule', 'BaseModule']
let modules = {}
for (const moduleName of moduleNames) {
import module from './' + moduleName
modules.moduleName = module
}
export modules
Without loop I have to write:
import NumberUtils from './NumberUtils'
import StringUtils from './StringUtils'
import ArrayUtils from './ArrayUtils'
import MyModule from './MyModule'
import AnotherModule from './AnotherModule'
import BaseModule from './BaseModule'
export {
NumberUtils,
StringUtils
ArrayUtils
MyModule
AnotherModule
BaseModule
}

One of main features of ES modules is they can be statically analyzed. For this reason import statement follows strict syntax - so does export. A snippet 'without loop' is the way it has to be done.
This allows to figure out module imports and exports exactly in IDEs and tools. This is useful for tree-shaking, for instance.

I think that better and more clear way to do it is to create an index file and then import multiple components in one import.
//index.js
import PopUp from './PopUp';
import ToggleSwitch from './ToggleSwitch';
export {
PopUp,
ToggleSwitch
};
//app.js
import { PopUp, ToggleSwitch } from './components';

For multiple import files I found this solution:
const files = require.context('../myFolder', true, /(Module|Utils)\.js$/)

ES2015: Named import translation

I'm following ES2015. I want to translate regular javascript import statements to ES2015 import statement(s).
What I have:
I have javascript import line as below:
var db = require('../config').get('db')
What I've tried:
import { config } from '../config'
const db = config.db
NOTE
config folder has the index.js which I want to load. In the regular var ... = require('...') statement automatically loads index.js if exists. And I want the ES2015 script also automatically loads when imported.

I think what you're looking for is:
import { db } from '../config'
Assuming db is properly export-ed from config.js, that should work.
Just to clarify, there's three main kinds of imports in JS native modules:
Import the whole module:
import * as foo from 'path/to/foo';
const something = foo.something;
Import specific named exports of the module. This works if the module exports the appropriate objects using export statements:
import { something } from 'path/to/foo';
Import the default export of the module. This only works if the module has an export default statement in it:
import thedefaultexport from 'path/to/foo';

It looks like the '../config' module exports a single object with a get() method. If this is the case, import the whole module, like so:
import * as config from '../config';
And get the database like so:
const db = config.get('db');
If possible, you might want to refactor your '../config' module so that it exports db directly.
export {db};
And then you can use the syntax #AsadSaeeduddin suggested:
import {dp} from '../config';