Is there a way in npm to import a src folder as a module?

Question

I have a React project with a structure like this:

• src
  • Components
    • My_component_1
    • My_component_2
  • Images
    • image_1
    • image_2
  • Pages
    • page_1
    • page_2

I'd like to know if exists a way to register a folder as a component (e.g @Images or @Components for all images or components). In this way, if I'm working on sub-component of page 1, I will not need to write:

import component from "../../Components/My_component_1

but

import {My_component_1} from '@Components'

and avoid to manage relative url and different URLs in different components.

Answer 1

You can configure your jsconfig.json like this:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

and then you will be able to import component like this:

import Button from 'components/Button';

Copied from https://create-react-app.dev/docs/importing-a-component/

Answer 2

I think you want to configure path aliases or shortcuts in your project. You can read more about it here: How to make an import shortcut/alias in create-react-app?.

There are also a few posts online on how to do that, for example on the medium.com or dev.to website.