how to handle the import hell in react? - javascript

I’m running my react app via Node. Is there a way to easily handle this import hell?
I’m running
./node_modules/.bin/babel-node --presets react,es2015 server/server.js
as npm start. And server.js is a simple Express Server that serves a ReactDOMServer.renderToString(<MyApp />)
Some of my react components have something like this:
import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate";
import Footer from "../../organisms/Footer/Footer";
import Header from "../../organisms/Header/Header";
import Hero from "../../organisms/Hero/Hero";
import MainMenu from "../../organisms/MainMenu/MainMenu";
import TodoList from "../../organisms/TodoList/TodoList";
this is prone to error, one changement like directory name would result in manually entering every file to update this.
do you have any idea how I can fix this. Ideally I would have something like this:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
is that possible? How?
Thank you!

This also doesn't look a lot better to me:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
... because in order to do that, you need to export / import to "myComponents" every time you create a new component.
The core issue I see in your example is that using relative paths for imports makes your code base very hard to maintain.
To escape the "import hell" in React, one popular option is to make the import statements without relative paths.
With a minor tweak to your Webpack configuration, you can get it to load files relative to the app root. See here and read more here.

You can create a common components file in your organisms directory to achieve that. Just create a new common.js or whatever name with the following:
export Footer from "./Footer/Footer";
export Header from "./Header/Header";
export Hero from "./Hero/Hero";
export MainMenu from "./MainMenu/MainMenu";
export TodoList from "./TodoList/TodoList";
Then in your other file:
import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js"

Related

react context does not work when imported from relative part

I have monorepo with a UI library inside packages which contains a lot of components. Every component also has a *.stories.tsx file. Under the apps folder is the storybook project, which loads the stories from #my-ui-library.
I have a decorator in the storybook config, so my ThemeContextProvider is wrapped around everything (ThemeContextProvider is also imported from #my-ui-library).
Does not work:
button.tsx
import { ThemeContext } from '../../ThemeContext'
Does work:
button.tsx
import { ThemeContext } from '#my-ui-library'
Using the relative import I get the error that theme, which is stored in ThemeContext, is undefined.
Now, that itself wouldn't be a problem if VS Code wouldn't auto import from the relative path and I didn't have to change it manually everywhere.

Only index.js works in reactjs

I am actually just getting started with Reactjs. So as i installed all the React packages on my PC using npm, i deleted all the src files which were in it because they were just sample files, i wanted to create on my own, but the problem is that my main js file name was "original.js" while it was demanding that "index.js" can't be found. So i changed my file name to "index.js" and now it works. Can someone tell me how to find the settings where i can see this issue so that i don't have to name my every main rract file as "index.js".
Thank you
Generally in the web development world (not just React), we use index.* files instead of main.* files.
If you would like to rename it, you might need to do some complex stuff like ejecting the app from create-react-app, and then changing webpack.config.js, but that seems way too advanced for you.
Instead I would recommend what most tutorials online say to do, which is keep index.js as the entry point of your app and import your Main component into it, like so:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<React.StrictMode>
<Main />
</React.StrictMode>,
document.getElementById("root")
);
// src/Main.js
import React from 'react';
const Main = () => {
return (
<h1>My main component</h1>
);
};
export default Main;

Component exception Element type is invalid

So I'm having an error that I have no idea where it coming from:
I tried finding where is HeaderSegment but it doesn't exist in my project, I don't have-
import HeaderSegment from './example.js'
I did the usual searched in google but the problem in these answers that I don't have any import module that is HeaderSegment. I'm using React native, Admob and Firebase, and I don't really know where the error is located so here the Repo. I tried to remove node_modules and then npm install but no good,
here the stack:
(Ofcourse that doesn't work) I know it hard to answer this question there two files involved they are header.js and homeStack.js.
Any help will make me happy, Thank you.
Issue
Seems you have mixed up default and named imports of your Header component.
Header is default exported from header.js:
export default Header;
but imported as a named import in homeStack.js:
import { Header } from '../shared/header';
Solution
Fix the Header export to match how it's imported (named export/import):
export Header;
or fix the Header import to match how it's exported (default export/import):
import Header from '../shared/header';

Cannot import Module without curly braces in react even after 'export default'

I have read somewhere that importing module in react with curly braces around imports the entire library instead and effectively increases the bundle size. I was using this concept and was successfull in importing modules without curly braces, like this:
import Jumbotron from 'reactstrap';
and it was working fine. I don't know why the next time I build the code, it started showing me this warning:
WARNING in ./React Coursera/Header.js 5:71-77
export default (imported as Jumbotron) was not found in reactstrap.
Also the app didn't run in browser.
Then I went to node_modules to check if export default is present in jumbotron or not, and I found this statement:
export default Jumbotron;
It means that indeed it was exporting the Jumbotron as default, then why it showed me this warning.
Can you help me guys to fix this problem?
Thanks in advance!
Where did you read that importing with curly will increase the bundle size, it's reverse,
// below line will import everything
import * as reactstrap from 'reactstrap'
But
// this will import only specific module
import { Jumbotron } from 'reactstrap'
By this line :
// will import from /reactstrap/index.js
import Jumbotron from 'reactstrap';
You are importing nothing https://github.com/reactstrap/reactstrap/blob/master/src/index.js , as there is export default
So I don't know how it worked before in your case
Below line :
// and this line is not inside the /reactstrap/index.js but /reactstrap/Jumbotron.js
export default Jumbotron;
is here : https://github.com/reactstrap/reactstrap/blob/master/src/Jumbotron.js
So you can do :
import { Jumbotron } from 'reactstrap'
It depends on your build setup and/or how the library code is setup. Some libraries are built in a way that won't import the entire library when you use curly braces. You can also have something enabled in your build tools called "tree shaking" which will remove all code that is unused.
I'm guessing what you were trying to do was import Jumbotron individually which is a safe bet when you are unsure if the whole lib will be imported. Again, it depends on the file structure of the library but you are probably missing the sub-directory in your import. There should be directories inside of the node_module folder for each component. Might be something like node_modules/reactstrap/Jumbotron. The default export you saw was probably on the Jumbotron file. When you use import Jumbotron from 'reactstrap' you are asking it do find a default export for the "main" file of the library. This would be defined in the package.json file of the library.
What you need to do is add the sub-directory to your import like so (just guessing here) import Jumbotron from 'reactstrap/Jumbotron'. Just think of reactstrap/ being the root directory of the library, you can select any file like you normally would.
If you are using webpack, there's this awesome plugin where you can check to see what is included in your bundles just to make sure you are indeed only importing the code that you need https://github.com/webpack-contrib/webpack-bundle-analyzer

How multiple import files into React component

i have a question about multiple imports in React.
i have a structure like that eg:
src
validations
required
index.js
number
index.js
and i basically import these files to my React component with this way and everything works well
import {required} from "validations/required";
import {number} from "validations/number";
but when these imports is to much my file is getting so much line of code and looks ugly.
so i tried to make it like that:
import {required, number} from "validations";
and like that:
import {required, number} from "validations/";
booth solutions not worked.
It's giving to me error:
Module not found: Can't resolve 'validations/' in '/Users/...../Components/MyComponent'
i didn't understand why but seems like react search that files in my MyComponent folder.
how can handle it ?

Categories