Add non-relative paths to create-react-app

Editing the Config

Relative paths can quickly become a hassle, especially in large apps. To allow the use of non-relative paths, simply add the following to the resolve block of your webpack configuration file (located in /config of an ejected create-react-app).

root: [ path.resolve('./src') ]

Note, some newer versions of create-react-app may require you to also import path into the webpack configuration file.

var path = require(‘path’);

The Results

This allows you to do imports such as

import Navigation from "containers/Navigation/Container"

rather than…

import Navigation from "../../../containers/Navigation/Container"

An import starting with ./ or ../ will be relative. An import path with no prefix will search the src directory recursively. Anything else will search node_modules.

For example, import { Link } from "react-router" will still work.

Example Code