how to use absolute paths instead of relative paths in React or Next.js?

Question

I'm using React and I have multiple components that I use in multiple higher-order components, my imports sometimes will be like this import MyComponent from '../../../../components/MyComponent' I know there is a more efficient way to import this by changing something inside the package.json file and then import it somewhat like this import MyComponent from '@components/myComponent' but I don't remember how can I do this, how can I do this?

Does this answer your question? https://stackoverflow.com/questions/45290002/how-to-configure-module-alias-properly — Lin Du, Aug 19 '21 at 05:28
Use jsconfig.json - https://code.visualstudio.com/docs/languages/jsconfig — Dhilip H, Aug 19 '21 at 05:29
Does this answer your question? [How to configure module.alias properly](https://stackoverflow.com/questions/45290002/how-to-configure-module-alias-properly) — pesehr, Aug 19 '21 at 05:29
you mean aliases it depends on your project tool is it nextjs or CRA and you should see there — elad BA, Aug 19 '21 at 05:30
so you should go to their site and see how its done if I recall they use webpack pluging and you should configure it there — elad BA, Aug 19 '21 at 05:32

score 9 · Accepted Answer · answered Aug 19 '21 at 05:33

9

You can do this by using jsconfig or tsconfig if you're using TypeScript.

Add jsconfig.json file to the root of your project.
Add the below code in your jsconfig.json file.
Start your react app using the command npm start.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

If you're using Next.js this may help https://nextjs.org/docs/advanced-features/module-path-aliases

answered Aug 19 '21 at 05:33

Wael Zoaiter

686
1
7
21

Thanks very much, I'm using Next.js the link you included answered my question. I'm using typescript so changing the `tsconfig.json` file did it for me. – Dastan Aug 19 '21 at 05:39

score 6 · Answer 2 · answered Aug 19 '21 at 05:32

Create a jsconfig.json in the root directory and copy the below code. Restart VSCode for the changes to apply -

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components/*": ["src/components/*"],
        }
    }
}

Tahid · Answer 3 · 2022-05-13T04:18:39.710

2

in next.js, this works for me=>

In root folder, create jsconfig.json( tsconfig.json if using typescript) file. Then add this

 { 
   "compilerOptions": { "baseUrl": "." },
   "include":["."]
 }

create a "components" folder in root file, then it will be like this :

// components/button.js

export default function Button() {
  return <button>Click me</button>
}


// App.js

import Button from 'components/button'

 export default function HomePage() {
    return (
     <>
      <h1>Hello World</h1>
      <Button />
     </>
   )
 }

edited May 13 '22 at 04:18

answered Dec 25 '21 at 16:26

Tahid

91
1
5

If you are going to lift most of your answer and example from [NextJS docs](https://nextjs.org/docs/advanced-features/module-path-aliases), you should give credit to the source. – nutsandbolts Jun 07 '22 at 23:01
I don't know if it is mentioned in the doc. I got this in a BootCamp. – Tahid Jun 08 '22 at 16:56

score 1 · Answer 4 · answered Aug 17 '23 at 17:13

In Root add a file name jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "./"
    },
    "include": ["./"],
    "exclude":["node_modules","build"]
}

Then use like this

import ChatWindow from 'src/components/ChatWindow';

Note: this will cover

ROOT/src/components/ChatWindow.js

how to use absolute paths instead of relative paths in React or Next.js?

4 Answers4

In Root add a file name jsconfig.json

Then use like this

!! Don't forget to rebuild !!

Linked

Related