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.

user_9342516 · Answer

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/

user_19555710 · Answer

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.

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

2 Answers