Home > Software engineering >  Is there a way in npm to import a src folder as a module?
Is there a way in npm to import a src folder as a module?

Time:08-10

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.

CodePudding user response:

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 also a few posts online how to do that, for example on the medium.com or dev.to website.

CodePudding user response:

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/

  • Related