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

Question

I\'ve been using create-react-app package for creating a react website. I was using relative paths throughout my app for importing components, resources, redux etc. eg,

Answer 1

Use react-app-rewire-alias solution. It provide more then just alias but it allows also multiple src folders in root directory:

Configuration for your above example is like this:

// config-overrides.js:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    "@redux": "src/redux",
    "@resource": "resource", // or "src/resource" if it is in src
  })(config)
  return config
}

That is for simple js projects.

See docs react-app-rewire-alias for more info. How to configure for ts projects or load paths from jsconfig.json or tsconfig.json etc.