My project looks something like this
/src
/components
/Homepage
Homepage.js.
App.js
index.css
index.js
I want to import Homepage.js to App.js. I did
import About from './Components/./Homepage/Homepage'; but it doesn't work. Any ideas on how I should import it correctly
So if you would like to import Homepage.js to App.js, correct your import statement as below
import About from './components/Homepage/Homepage'
There is a small typo in your import statement which is failing. :)
I would suggest using VSCode, it helps a lot.
Make sure you have export default About in your Homepage.js, then you can use import About from './components/Homepage/Homepage'; in App.js
If you just use export About, then you can use import { About } from './components/Homepage/Homepage'; in App.js.
Make sure you exported the object or function.
Use the correct import path
Related
I tried to import the notifications.js file in App.jsx, but it didn't work.I am using React and Vite.
I tried using import "./notifications" in App.jsx and in the App.jsx file I used tag name notifications. I expected to view the arrays in the notifications.js.
Usually you want to import something specific (like a function) from a JS file. First in your notifications.js file, you have to export such a function. Then in your App.jsx you import that function with the import statement like this:
import { MyFunction } from "./notifications"
or
import MyFunction from "./notifications" if the function is the default export.
You can read more about importing and exporting here
I'm working on a POC on stackblitz environment, while trying to import the app.tsx file, Import error, can't find file: getting this error in browser.
Below is my project link
https://stackblitz.com/edit/react-ts-kvyax9
Please help.
You have lots of typos/spelling mistakes in your imports.
In index.tsx, you have this import:
import App from './App';
whereas your app file exists as app.tsx not as App.tsx. You need to mention the filename correctly as
import App from './app';
Similarly, in app.tsx, all your imports are referencing incorrect filenames. Change them to this:
import A from './a';
import B from './b';
import C from './c';
import D from './d';
import './style';
I have many components in a components folder. How can I import
them in one line?
For example I have this:
import FormField from "./../components/FormField";
import MultiSelect from "./../components/MultiSelect";
but I want to import it like this:
import {MultiSelect, FormField} from "./../components";
which is not working.
To do like this:
import { MultiSelect, FormField } from "./../components";
In your components folder, create new file: index.js with
export { default as FormField } from './FormField';
export { default as MultiSelect} from './MultiSelect';
Just make index.js in components folder
export * from './FormField';
export * from './MultiSelect';
After this you can easily access.
import {MultiSelect,FormField} from "./../components";
Add index.js in components folder having:
export { default as FormField } from './FormField';
export { default as MultiSelect } from './MultiSelect';
Then in the file where you want to use these components, import them using:
import { MultiSelect,FormField } from "./../components";
There is already an answer for your question. But let me add my 5 cents:
First:
you may import like this: from "../components"; instead of from "./../components";
Second:
I have some experience with imports and I have found out that import {MultiSelect, FormField} from "./../components"; has a lot of pitfalls. You need to create index.js fiels. When you will search MultiSelect uses within your IDE you will always have index.js and that isn't useful. Also if you'll decide to move your file you will have to change 3 files instead of 1 (old index.js new index.js and file that used your MultiSelect).
Is it worth it? It's up too you of course! But now you know what problems you may have :)
I'm trying to build a simple component library using React. The file structure is as follows:
-src
--index.js
--lib
---TextInput.css
---TextInput.js
In my index.js file I'm referencing the lib folder like this:
import React from 'react';
import { render } from "react-dom";
import { TextInput } from "./lib";
However, I get the following error:
Can't resolve './lib' in '/Users/johnnynolan/Repos/simple-component-library/src'
Does anyone know why this might be?
Duh...okay, I realised what I didn't do! I didn't have an index.js file within my lib folder so I could export the component, like so:
import TextInput from "./TextInput";
export { TextInput };
So the new file structure will look like this:
-src
--index.js
--lib
---index.js
---TextInput.css
---TextInput.js
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.