By default create-react-app does not allow absolute imports which is a bit shame because you always need to check the location of the file you're editing and the location of the file you're importing. Even more headache when you need to make some changes in the folder structure. If you use absolute path, you do not need to worry about this. Since this is not supported by default we will need to make some small tweaks.

Adding .env file to root of your application (same folder with package.json) and adding below will solve your problem partially. Absolute imports will work but your editor will fail providing intellisense.

REACT_APP_NODE_PATH=src/

So we do need to activate intellisense too. Now change your .env file adding both variables:

REACT_APP_NODE_PATH=src/
NODE_PATH=src/

If you install babel-plugin-module-resolver and follow the instructions you wil have both intellisense and absolute paths working.

So no longer imports like:

import { myModule } from '../../../myModule'

Instructions:

• Install plugin and save in your development environment

npm install --save-dev babel-plugin-module-resolver

• Add below lines to your .babelrc file (Create in the same directory as package.json if you don't have any)

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

jsconfig.json (same folder as package.json)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  }
}

Now your Visual Studio Code will still be supporting intellisense and also you will be able to use absolute imports in your create-react-app project without ejecting webpack.