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
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
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
I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:
GreetUser.jsx
index.jsx
index.html
while compiling it is showing that could not find required index.js file.
I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
render()
{
return <h1>Greetings from suraj!!!!</h1>;
}
}
export default GreetUser;
2.index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';
import GreetUser from './Component/GreetUser.jsx';
ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));
serviceWorker.unregister();
Could not find a required file.
Name: index.js
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
index file must with .js extension and not jsx is not react component.
index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.
You can modify webpack configuration if you need it.
You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?
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 have a bunch of React components in a folder and I can import each one individually like this:
import Component1 from '../components/component1/component1';
import Component2 from '../components/component2/component2';
Using the components like this works fine. However, when I bundle all the components using Webpack, the following code returns an empty object when I try to import the component.
import Component1 from '../dist/bundle.js';
I can't render this component. How do I export the components when bundling files?
Simply put you cannot import any modules from a bundle.
You need to include this code inside the source and then bundle it together
Actually you can do that. In my situation I needed react components in backbone application so what I did:
In react exposed components that should be importable by exporting them in entry point (usually index.js) like:
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header/Header';
export {
React,
ReactDOM,
Header
};
Made my bundle output as library:
output: {
path: /some/path/of/your/lib,
library: 'reactapp',
libraryTarget: 'umd',
filename: `app${jsExtension}`,
},
Then bind name to file path in requirejs config:
reactapp: '/some/path/of/your/lib/app.js'
Then in code I can import that bundle as reactapp like:
define(["reactapp"], function(reactapp) {
// reactapp is object containing React, ReactDOM, Header
});