How to avoid using relative path imports in create-react-app

How to avoid using relative path imports

Like (/../../../public/assets/SVG/bob.svg)

This project I’m doing at the moment was created with create-react-app and uses nextjs and I use Visual Studio Code (vscode).

It’s pretty simple. Say your directory list looks like this (you may not yet have a .env file)

Here’s the problem:

import ShrubLogo from "../../../public/assets/SVG/shrbgrasslesslogo.svg";

It looks crappy and It’s harder to read. Instead why don’t we create an .env file (as seen in my screenshot above), and put in:

PUBLIC_PATH=public

From now on when you want to reference something from the public directory all you need to do is:

import ShrubLogo from "public/assets/SVG/shrbgrasslesslogo.svg";

Makes it much easier to read and to code.

The other option, and the option that may have superseded in the above (but make sure you have vscode) by making sure you have a:

jsconfig.json file and making sure it has:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

If you choose this option, then everything will have root level import.

Another trick is that if you want to get fancy is by doing this:

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

Then you can do:

import { Layout } from "@components/layout";

instead of

import { Layout } from "src/components/layout";

There’s so many options and tricks to use out there for this sort of thing, but for the last half of this small post, you can read more about what you can do with jsconfig.json at https://code.visualstudio.com/docs/languages/jsconfig