I have created a file named index.jsI am going to use this file as main importing and exporting file
I have two components including login and header in my project and i have exported them as following method at end of each file:
export {Login};
export {Header};
Then i exported both of them in index.js as following method:
export * from './login';
export * from './header';
And at the end i have imported both of them in App.js by this method:
import {Login, Header} from './components/index';
It doesn't work and i am getting error :
Invariant violation:Element type is invalid.
Does anybody knows which part i made mistake?
If you really want to achieve what you wanted. You could instead:
export default Login;
export default Header;
on each files and import it on your index.js
import Login from './login';
import Header from './header';
...
export {
Login,
Header
}
import {Login, Header} from './components'; // you could eliminate the index
If you are using class style components, you can do
class Login extends Component {
render() {
return(
<Text> Text and other tags here </Text>
)
}
}
export default Login;
Then in your App.js
import Login from '../components/Login.js'; //or wherever this component lives
Assume our folder structure looks like this.
|- elements
|- Login.js
|- Header.js
|- index.js
|- components
|- App.js
1.export the components
// ./elements/Login.js
export { Login };
// ./elements/Header.js
export { Header };
2.import and export all the components in index.js
// ./elements/index.js
export { Loading } from './Login';
export { Header } from './Header';
import in any file we need
// ./components/App.js
import { Login, Header } from '../elements';
Related
Hello i'm not sure what i'm doing wong i keep getting this error
ERROR in ./src/pages/Workers/Workers.js 17:35-42
export 'Sidebar' (imported as 'Sidebar') was not found in '../../components/Sidebar/index' (possible exports: default)
Stucture:
Import:
Export:
Try
import Sidebar from'./components/Sidebar/index'
I've been doing something alittle different. Inside my Components Folder, I will list all my components, and when Im done, I will add an index.jsx file. And inside the index.jsx file I'll list all the components inside there.
export { default as Navbar } from './Navbar';
export { default as Home } from './Home';
export { default as Footer } from './Footer';
export { default as Contact } from './Contact';
export { default as Body } from './Body';
export { default as Subscribe } from './Subscribe';
Then inside App.js, I'll import everything like this.
import {
Navbar,
Home,
Footer,
Blog,
Contact,
Subscribe } from './components';
Everything seems to work for me this way.. Hope that helps.
In React,You need to import a component as follows
import {Sidebar} from "pathwherethecomponentexists";
you can read more about exports in react Here
I have been trying to use create-react-library and so far it works, but I can only import components successfully from index.js. If I try to make another file , I recieve an import error.
The file structure is as such
example
\ Node Module
\ public
\ src
| App.js
| index.js
...
src
\ Patterns
| index.js
| button.js
Currently I can only successfully import components from index.js of the main src. Is there a way to successfully import components from folders such as Patterns or another file?
\ App.js ( example )
Importing button gives me an error "Cant import button from neo"
import React from 'react'
import { ExampleComponent,Button} from 'neo'
import {Test} from 'neo/Patterns';
import 'neo/dist/index.css'
const App = () => {
return (
<>
<Test />
<Button text='Click me' />
<ExampleComponent text="Create React Library Example 😄" />
</>
)
}
export default App
Please check if this is what you're trying to achieve.
index.js will be exporting required components like this,
import ExampleComponent from './ExampleComponent/ExampleComponent';
// ExampleComponent is placed inside a folder named ExampleComponent
import Patterns from './Patterns/Patterns';
// Patterns is placed inside a folder named Patterns
export { ExampleComponent, Patterns };
Patterns.js can look like this,
import React from 'react'
const Patterns = () => {
return <div>Patterns Component sample</div>
}
export default Patterns;
ExampleComponent.js can look like this,
import React from 'react'
import styles from './styles.module.css'
const ExampleComponent = ({ text }) => {
return <div className={styles.test}>Example Component: {text}</div>
}
export default ExampleComponent;
In the consumer level (in this case, example folder), in any jsx, like App.js you can refer those exported components like,
import { ExampleComponent, Patterns } from 'neo'
return (
<Patterns />
)
I usually export the components by this way:
export {Login} ;
Then import them in index.js file by this way:
export * from './login';
Then import them in each screen i want by this way :
import {Login, Header, Footer} from './index.js'
Now i am using redux in my project and i should use connect when i export my components by this way:
export default connect(mapStateToProps, {emailChanged})({Login});
But i am getting following error
How should i export Logincomponent ? ( Please keep in your mind i need to use index.js file to export my components, then i can not export them separately)
If u want specific name for the Component. you can create const and pass it in export.
const LoginComponent = connect(mapStateToProps, {emailChanged})({Login});
export { LoginComponent };
I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.
I try to simplify my Components import, from:
import Component1 from './components/Component1'
import Component2 from './components/Component2'
To something like that:
import {Component1, Component2} from './components/'
I have tried to create an index.js file into components directory (following this post import modules from files in directory):
export * from 'Component1';
export * from 'Component2';
But I still have a "Module not found" error.
Any clue ?
Thanks,
Orb
You need to add a dot to indicate it is a local file, not an npm-published module. Change your exports line like so
export * from './Component1';
UPD
To resolve next issue with named import you need to give a name to default export from Component1.js file
export Component1 from './Component1';
Follow this answer
Are you sure the path is correct?
Try to specify the absolute path like:
import Component1 from '/home/your_username/components/Component1'
import Component2 from '/home/your_username/components/Component2'
You can see the correct path of your directory from terminal with the command "pwd".
Be sure to have the access to the directory and file.
You can try to run the program as root.
While exporting components from your Component1 and Component2 instead of *, you should export it as objects -
//In Component1.js(x)
export { Component1 };
and
//In Component2.js(x)
export { Component2 };
With this you should be able to import like:
import { Component1 } from '...';
import { Component2 } from '...';
Yeah I do the same thing with my imports and it's a lot nicer when they are being exported from the same file. Here's an example of how I achieve this:
components/index.js
import Component1 from './Component1';
import Component2 from './Component2';
module.exports = {
Component1,
Component2
};
Then to import them
import { Component1, Component2 } from './components';
If you are using Webpack, check out webpack resolve to get rid of your relative paths.
Example using Webpack resolve
//Will work at any nested level
import { Component1, Component2 } from 'components';
And just for clarification, Component1 and Component2 should be using a default export
export default class Component1 extends React.Component {...}
or
var Component1 = createReactClass({...});
module.exports = Component1;