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?
You can do this by using jsconfig or tsconfig if you're using TypeScript.
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
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/*"],
}
}
}
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 />
</>
)
}