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.

Answer 2

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!

Answer 3

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

Answer 4

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.

Answer 5

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"]
}

Alternatively:

If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.

Once you've 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';

Answer 6

Create a file called .env in the project root and write there:

NODE_PATH=src

Then restart the development server. You should be able to import anything inside src without relative paths.

Note I would not recommend calling your folder src/redux because now it is confusing whether redux import refers to your app or the library. Instead you can call your folder src/app and import things from app/....

We intentionally don't support custom syntax like @redux because it's not compatible with Node resolution algorithm.