React Js: export problems '(possible exports: default)' - reactjs

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

Related

how do i import file from app.js to components in react

i have following file structure
.components
.coma
app.js
i have tried
import myname form "./app.js"
and also
import myname form ".//app.js" in compa
Check out this codesandbox link
There are two ways that you can export a function, component, etc:
Default exports:
To export:
export default function Component() {
return <div></div>;
}
To import
import Component from './Component';
Named exports:
To export:
export function Component() {
return <div>Component</div>;
}
To import
import { Component } from './Component';
See this link for more information about exporting components in React
EDIT:
You can declare your components and functions and export them in another line.

How to use import statement in react?

how to use import statement to import functions from one component to other component.
Below is how the import statement is:
import Tool from '../Common';
import { ToolContextProvider } from '../Common';
This complaint of duplicate lines. So I have tried something like below,
import { ToolContextProvider, Tool} from '../Common';
But this doesn't seem to be correct. How can write this in one line.
Could someone help me with this? Thanks.
basically there are two different type of export in javascript modules (also react included):
default export
named export
default export would be like :
// someFile.js
export default SomeComponent
named export would be like
// someFile.js
export SomeOtherComponent
importing them in other components for using them should be like:
// useCase.js
import SomeComponent from './someFile' // for default export
import { SomeOtherComponent } from './someFile' // for named export
import SomeComponent, { SomeOtherComponent } from './someFile' // for using both
You can import like this. Just combine both of them.
import Tool, { ToolContextProvider } from '../Common';

issue with exporting redux in react native

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 };

import and export multiple components via functional components

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';

How to import all components in React?

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.

Resources