Recently, I worked on a legacy codebase and looking into it I found out the imports were done using relative path, It was difficult to comprehend and also show errors when trying to copy the code from one file to another folder, thereby spending more time to resolve the import errors. In this article, I will explain how to use absolute path in your CRA, Vite and React-Native projects
Table Of Contents
- What is jsconfig.json ?
- Configuring Absolute path in:
What is jsconfig.json?
The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. In jsconfig.json, files belonging to the project and the files to be excluded from the project can be listed.
How to Configure Absolute Path in Create-React-App
In the root of our folder, where we have package.json file, create a file called jsconfig.json. Add the following code
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"exclude":["node_modules,"build"]
}
👉🏼 By default the JavaScript language service will analyze and provide IntelliSense for all files in your JavaScript project. Its a good practise to exclude node_modulues , build , dist etc to speed up IntelliSense. If you do not have a jsconfig.json in your workspace, VS Code will by default exclude the node_modules folder for you.
👉🏼 After adding the file, You will need to restart your server for this to be effective and we can reference the folders inside our src without error as shown below
Relative Path Configuration in Vite
👉🏼 Here, we need to install a dependency vite-jsconfig-paths which gives vite the ability to resolve imports using jsconfig.json path mapping. open your terminal and run
npm i vite-jsconfig-paths -D
👉🏼 After installation, we inject it into our vite app by adding it to our vite.config.js file as shown below
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import jsconfigPaths from "vite-jsconfig-paths";
export default defineConfig({
plugins: [react(), jsconfigPaths()],
});
👉🏼 After that, we create jsconfig.json file as shown in the react demonstration.
Relative Path configuration In React-Native
👉🏼 For this, we use babel-plugin-root-import library. lets install the package as below:
npm i babel-plugin-root-import -D
👉🏼 After installation, add the dependency to your babel.config.js file.
👉🏼 Custom rootPathPrefix: By default, the import will be relative to the working directory of the process running babel. we can customized by using ~, @ or any other symbol. I will be using the @ and our babel.config.js looks like this
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"babel-plugin-root-import",
{
rootPathPrefix: "@",
rootPathSuffix: "src",
},
],
],
};
};
👉🏼 If you don't like the @ syntax you can use your own symbol (for example an # symbol or \ or anything you want).
👉🏼 It is now possible to import your files using "@/" as a prefix. Here's an example below:
Before
After
Important Notice: After making the necessary changes in babel.config.js, Don't forget to restart your server.
Thank you for reading. I hope you've learned something new from this post. Want to stay up to date with regular content regarding JavaScript, React? Follow me ❤️ on LinkedIn.
Top comments (7)
Very useful. Thanks!
Thanks for the comment
Hello,
I was just going through the article and I have 1 doubt.
Could you please confirm that we need to put/create jsconfig.json file in the root path of react project or inside the src folder where index.js is present.
& Thanks for the article.
It's solved my pain. Thank so much !
Hello,
Could you please confirm that we need to put/create jsconfig.json file in the root path of react project or inside the src folder where index.js is present.
it will be in the root of your project folder similar to package.json or .env file
Nice one!!