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

user_14795200 0
Viewed 8098

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?

npm reactjs node.js javascript
3 Answers

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

user_109610550

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

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