[Solved]-How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app-Reactjs

none of the answers worked for me. some didn't work at all and others worked but the import was already inside src, for example:

import something from 'path/to/file'.

whereas i wanted to be able to do:

import something from 'src/path/to/file'

here is how i solved it:

tsconfig.json

{
  "compileroptions": {
    // ...
    "baseurl": ".",
    "rootdirs": [
      "src"
    ]
  },
  "include": [
    "src"
  ]
}

i am using babel-plugin-module-resolver for my project to resolve that problem. babel-plugin-module-resolver also is the same as module-alis. so i think you should just resolve using module-alis problem.

because you didn't tell us why using module-alis was fail? so i cant show you how to fix it.

dont give up your solution while you dont know the reason!

in package.json file,

eject this code in the scripts object like this..

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "node_path=src/ react-scripts eject"
  },

this will enable the absolute path imports in your app

the alias solution for craco or rewired create-react-app is react-app-alias for systems as: craco, react-app-rewired, customize-cra

according docs of mentioned systems replace react-scripts in package.json and configure next:

react-app-rewired

// config-overrides.js
const {aliaswebpack, aliasjest} = require('react-app-alias')

const options = {} // default is empty for most cases

module.exports = aliaswebpack(options)
module.exports.jest = aliasjest(options)

craco

// craco.config.js
const {cracoaliasplugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: cracoaliasplugin,
      options: {}
    }
  ]
}

all

configure aliases in json like this:

// tsconfig.paths.json
{
  "compileroptions": {
    "baseurl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

and add this file in extends section of main typescript config file:

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

feb 2010
wasted about an hour on this. an example is below:

goal: import app.css in homepage.js

myapp\src\app.css
myapp\src\pages\homepage.js

file: jsconfig.json

{
  "compileroptions": {
    "baseurl": "src"
  }
}

file: src\pages\homepage.js

import "app.css";

we can use webpack 2 resolve property in the webpack config.

sample webpack config using resolve :

here component and utils are independent folder containing react components.

resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafecache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
        }
    }

after that we can import directly in files :

import uiutils from 'utils/uiutils';
import tabcontent from 'components/tabcontent';

webpack 2 resolve reference

after you try ben smith's solution above if you find eslint complains about importing absolute path add the following line to your eslint config:

settings: {
  'import/resolver': {
    node: {
      paths: ['src'],
    },
  },
},

replace 'src' with your folder if you use your own boilerplate with your folder's name.

the approach in the accepted answer has now been superseded. create react app now has a different way to set absolute paths as documented here.

to summarise, you can configure your application to support importing modules using absolute paths by doing the following:

create/edit your jsconfig.json/tsconfig.json in the root of your project with the following:

{
  "compileroptions": {
    "baseurl": "src"
  },
  "include": ["src"]
}

once you have done this you can then import by specifying subdirectories of "src" (in the following example, components is a subdirectory of src) e.g.

import button from 'components/button'