Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React import root path helper

In react because I have to import varies helper or component I have this problem

import approxPerDay from '../../../utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'

and in another file it might be import approxPerDay from '../utils/approxPerDay.js'

It's really hard and time consuming to find is the relative path is. Is there any npm or helper can solve this issue?

like image 243
Alan Jenshen Avatar asked May 19 '17 07:05

Alan Jenshen


People also ask

How do I add absolute import in react?

According to create-react-app Docs, We can use absolute imports in our react project by configuring a jsconfig. json / tsconfig. json (for typescript projects) file in the root of our project. If you're using TypeScript in your project, you will already have a tsconfig.

How do I import outside SRC in react?

To import component outside src/ directory with React, we can declare a local dependency on package. json. { //... "dependencies": { "app-b-dashboard": "file:./packages/app-b-dashboard" //... } //... } to declare the app-b-dashboard dependency in the dependencies section of package.

How do you use relative imports in react?

Select the src folder in the project window and right-click on it. Select the option Mark Directory as and then select the Resources Root option. Now go to Settings -> Editor -> Code Style -> JavaScript and select the Imports tab. Then check the Use paths relative to the project, resource or sources roots.


1 Answers

I was experiencing a similar problem. I finally resolved it by following this article: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

  1. Create a .env file in the root of the react app
  2. Add a line NODE_PATH = src/

That worked for me.

like image 128
DigiBanks99 Avatar answered Sep 28 '22 09:09

DigiBanks99