Absolute imports using alias not working in ubuntu. Works in windows

Viewed 56

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.

1 Answers

Try this. Describes well how to use absolute imports in React.

Related