I use react to build my library of components. I need to have an index.js to import all components in one place.
Something like this:
MyComponents/
Button.js
Label.js
index.js
Inside the index.js I tried to do next:
// this export nothing
export {default} from './Button';
// this tells me about syntax error
export default from './Button';
I found only this solution that works
import Button from './Button';
export default Button;
But I found that some React Component libraries uses syntax that I mentioned above (export default from './Button') - and it works somehow. Looks like they use some babel-plugin-transform-* to do this.
Please find me to find how to transform my two lines of import export to one line of export ... from .... Thank you.
P.S. In the end I need to do this: import Button from './MyComponents';
Use the following syntax:
File: layouts/index.js
export {default as Flex} from './flex'
export {default as Grid} from './grid'
export {default as Dock} from './dock'
Then you can use
import { Dock, Grid } from 'layouts'
or
import layouts from 'layouts'
<layouts.Flex >...</layouts.Flex>
In order to export nested indices created by the above method you can use export * syntax:
File: icons/index.js
export * as action from './action';
export * as alert from './alert';
export * as av from './av';
Usage:
import * as icons from 'material/icons'
<icons.action.Close />
To use this construction:
export default from './Button';
we need to use preset-stage-1.
How to use
npm install babel-preset-stage-1 --save-dev
edit file package.json and add stage-1 to the presets section in babel.
Example of package.json
"babel": {
"presets": [
"es2015",
"stage-1",
"react"
]
},
More info
It's a proposal to the ECMAScript - https://github.com/leebyron/ecmascript-export-default-from (still in review).
Just use export * from "./Button"; to export the whole module. This will help your use case.
Unfortunately, there is no one-line syntax to export just the default of another module.
Related
I am trying to understand how authoring libraries works with webpack and while doing works:
import add from 'sample-lib/add'
trying to import anything from the main does not:
import { add, subtract } from 'sample-lib'
Here is the repo for your reference:
https://github.com/rssilvaba/sample-lib
Any ideas why I can't do that? is it because it is umd? something with my package.json? Am I exporting from main in the wrong way?
Also extra question. how could I re export all files without having to manually add all of the files to the main.js?
resolved doing:
export { default as add } from './add'
export { default as subtract } from './subtract'
export * from './others'
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;
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!
I'm creating a project in React and I'm not sure if the approach to import/export is right.
I'm exporting my components with an index.js file inside my Components folder like this:
export {default as Card} from './Card/Card'
export {default as CardList} from './CardList/CardList'
Each component is a const and I'm exporting it as:
export default Card and export default CardList
I'm using export default two times
in the index.js
in each component file
Is this the best practice to use an index file to export the components?
Thanks!
You can keep exporting your components as default, and in your index.js you can export them like:
export Card from './Card/Card';
export CardList from './CardList/CardList';
then when using these, you can do:
import {Card, CardList} from 'components';
Your point of contact (index.js) Feels less verbose
I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.