CODEWITHSUNDEEP
javascriptnode.jsreactjsnpm
Dastan
Dastan

Reputation: 2106

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

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?

Upvotes: 9

Views: 24560

Answers (4)

Md. Saifur Rahman
Md. Saifur Rahman

Reputation: 404

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

!! Don't forget to rebuild !!

Upvotes: 1

Tahid
Tahid

Reputation: 131

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 />
     </>
   )
 }

Upvotes: 2

Wael Zoaiter
Wael Zoaiter

Reputation: 716

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

  1. Add jsconfig.json file to the root of your project.
  2. Add the below code in your jsconfig.json file.
  3. 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

Upvotes: 10

Dhilip H
Dhilip H

Reputation: 652

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/*"],
        }
    }
}

Upvotes: 7

Related Questions