So I'm using an absolute import statement in react and it works well in Windows system. When same project is started in Ubuntu, I get

Can't resolve './components/base/navBar/NavBar' in '/home/<user_name>/Files/Projects/<project_name>/src'

Below is the babel plugin config (.babelrc),

[
    "babel-plugin-root-import",
    {
        "paths": [
            {
                "rootPathPrefix": "~",
                "rootPathSuffix": "./"
            },
            {
                "rootPathPrefix": "@src",
                "rootPathSuffix": "src"
            },
            {
                "rootPathPrefix": "@Component",
                "rootPathSuffix": "src/components"
            }
        ]
    }
]

and this is the import statement I'm using in ./src/App.js

import Navbar from "@Component/base/navBar/NavBar";

and this is the rule for js file in webpack,

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
        },
    },
}

Works in windows. Does not work in ubuntu. What am I doing wrong here?

Thanks for your time.