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 />

How to export all the components with require?

I'm making a Vue js application in which I need to export all the files / components from a certain directory and import those files / components them in a file i.e path.js.
How should I exports the components if I require them all in index.js so that I can access them in path.js as import {Component1,Component2} from index.js?
Note: I don't want to explicitly include components in index.js with import keyword that is why I used require.
Index.js
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";
const requireComponent = require.context(".", true, /\.vue$/); // used to fetch Component1.vue and Component2.vue
const components = {};
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName);
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\//, "").replace(/\.\w+$/, ""))
);
components[componentName] = requireComponent(fileName).default;
});
export default components;
paths.js
import {Component1,Component2} from 'index.js';'
console.log(Component1); // undefined
I've tried exporting components as export {...components} but that throws an error.

It should be
import Component from 'index.js'
As you exported it in just a single constant value.

There is no such thing as Component1 or Component2 in Index.js, but I think I know what you are looking for.
You can achieve it through Named exports and imports.
Simple example below:
index.js
export {components[0] as Component1};
export {components[1] as Component2};
export default components;
paths.js
import {Component1, Component2} from 'index.js';
//some code

Why do npm modules, like material-ui, export es6 and es5 files?

In many npm modules I recently installed (eg. #material-ui/core) there are three ways to import the same React component:
import { AppBar } from '#material-ui/core'
import AppBar from '#material-ui/core/AppBar/AppBar'
import AppBar from '#material-ui/core/es/AppBar/AppBar'
In which scenario should I use variant 3 / es6 exported files?
If tree-shaking / dead code elimination works in webpack and the npm module. Should I rather use variant 1 (named import) instead of variant 2 (default export)?

There are two types of export:
1) Named export that is you export something like:
// exports a function declared earlier
export { myFunction };
// exports a constant
export const FOO = "foo";
if you want to import these, then syntax would be like:
import {FOO, myFunction} from './file';
2) Default export that is you export something like:
export default function() {}
you can rename your function, class to any name you want when you import, and its syntax would be like:
import myFunction from './file';
NOTE: You can have multiple named export in single file but you can not have multiple default export in single file.
For more detail check out this link: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

The main difference is how that library is exporting the modules.
When you do import AppBar from '#material-ui/core/AppBar/AppBar', this means that #material-ui/core/AppBar/AppBar is exporting a single object with export default AppBar.
And you're expected to imported as you did. However you're not limited to export a single default export from your module.
For example with React exposes the main object (i.e. React which is again being exported as default) that has all the properties you may want to use. But with the import syntax from ES6, you can import a specific property/function from that module(e.g. import { Component } from 'react'; which is exported as export class Component...)
I hope that's clear!

Import and export reducer with React-Redux

I'm studying React-Redux and I have an example like this
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp /*from reducers*/
then I have
import reducer from './reducers'
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
So, it didn't export anything as reducer in ./reducers, and the syntax import is not either import * as reducer in ES6. Why does it work ?

export default todoApp
So when the import reducer from './reducers' is called the todoApp is stored inside reducer. Thats why we use the default keyword. The variable name doesn't need to be reducer it can be anything.
By using default keyword a single value or a fallback value is passed to the file that imports it
Similarly if we exported a function without default
eg
export function someFunc(){...}
We can import it by
import {someFunc} from '/file/path.js'
EDIT : There can only be one default export from a file. When we import other components we need to specify the component name as identifier(eg {someFunc}). For default imports we can use any identifier we want.
Read more about import here

export default todoApp
So whenever you "'import xyz from './reducers'" ,reducer.js will return
todoApp beacuse by default reducer.js is returning it. No matter what
name you give ,you can change 'import reducers from "./reducers"' to
'import red from ./reducers' it will work in that case also .
only one thing you should keep in mind ,that whenever importing
default element you should avoid applying '{}' around the imported
element . so in your case "import {reducer} from './reducer'" would
be wrong.
But if you write "export const todoApp" in reducers.js ,then in that
case you have to give exact name while importing it, now you have to
import it as 'import {todoApp} from './reducers'
And There should be only one default export from a file.

When you export something as default from a module, you basically exporting an anonymous variable. So when you import anything like this import something from 'somewhere' the something can be any name you choose to use inside the file that does the import.