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;
Related
I'm trying to write a library with TypeScript and Parcel. Everything's fine until i try to import it in another app.
In the library is a index.ts file which gathers the components and exports them:
import Component1 from "./components/Component1";
import Component2 from './components/Component2';
export {
Component1,
Component2,
};
After building i get index.js, index.css and index.d.ts.
In the index.d.ts file the export has been converted to export default:
export default Component1;
export default Component2;
I linked my library with yarn to my consumer app. When i want to import { Component1 } from 'myLibrary'; i get the following error: Module '"myLibrary"' has no exported member 'Component1'. Did you mean to use 'import Component1 from "myLibrary"' instead?. Now when i try to import default (like it is in the index.d.ts) import Component1 from 'myLibrary'; the error changes to: Attempted import error: 'myLibrary' does not contain a default export (imported as 'Component1').
Why does the export conversion happen and how can i circumvent this?
EDIT:
The Library gets built and bundled by parcel, the consumer gets handled by react-scripts.
After Mr.Manhattans suggestion:
index.ts:
export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';
generated index.d.ts:
export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';
consumer:
function App() => {
render(
<>
<Component1 />
<Component2 />
</>
)
};
Error:
./src/App.tsx
[1] Attempted import error: 'Component2' is not exported from 'myLibrary'.
you can direcly export:
export Component1 from "./components/Component1";
export Component2 from './components/Component2';
You're trying to re-export a named export that doesn't exist. Try re-exporting the default instead:
export { default as Component1 } from './components/Component1';
export { default as Component2 } from './components/Component2';
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
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
Instead of writing the following code in every reactnative's ".js" file, is it possible to write it in a single file and the export it so that i can use it in other js files just by importing this one file (containing all the component that I need to use)
import React from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
Now instead of writing the above code in page1.js, page2.js, page3.js, how do i write it in a single file called "comp.js" and export it from there so that i only have to import comp.js in the page1.js, page2.js and page3.js file
It is possible but I recommend using index.js for that folder instead of that comp.js
In a folder you can create index.js and import all related js in that folder so you can import very easy
For example: I have my folder called Components
Create index.js in the folder Components
Import and export files
import comp1 from './comp1'
import comp2 from './comp2'
import comp3 from './comp3'
export { comp1, comp2, comp3 }
Import folder instead of each file and select only needed files import { comp1, comp2 } from '../Components'
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.