React how can i use @import

Question

How can i use @import to import my components in my scripts from other folders in my react project.

For example i have a folder structure like this

src
|
--- App.jsx
|
--- pages
|     |___ home.jsx
|
|
--- components
      |__ HomeComponent.jsx

How can i use in home.jsx

import HomeComponent from "@components/HomeComponent"

if i just try to use import HomeComponent from "@components/HomeComponent" like this i get error module not found.

It is my understanding that in order to use @components and have it refer to the components folder under src, one needs to set-up an alias. Do you know if you use webpack - and if so, please try this for more specifics. — jsN00b
– jsN00b, Commented Feb 1, 2022 at 17:21
you can use babel path aliases stackoverflow.com/questions/58799049/… — Daniil
– Daniil, Commented Feb 1, 2022 at 17:24

cEeNiKc · Accepted Answer · 2022-02-01 17:27:01Z

3

You can do a relative import from pages/home.jsx like this

import HomeComponent from "../components/HomeComponent"

Here ../ means you are going up one directory level and then into components directory

You can also perform absolute imports by setting up additional tools like babel or webpack. An absolute import would look like this when you have set src as your root directory

import HomeComponent from "components/HomeComponent"

If you are using create-react-app, this setup is easy to do as all the tooling is already handled by create-react-app

You can read about it here under the absolute imports section - https://create-react-app.dev/docs/importing-a-component/

edited Feb 1, 2022 at 17:27

answered Feb 1, 2022 at 17:19

cEeNiKc

1,3188 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Santiago Siordia · Accepted Answer · 2022-02-01 18:07:39Z

babel-plugin-module-resolver

This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can write @utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');

Install the plugin

npm install --save-dev babel-plugin-module-resolver

or

yarn add --dev babel-plugin-module-resolver

Specify the plugin in your .babelrc with the custom root or alias. Here's an example:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "test": "./test",
        "underscore": "lodash"
      }
    }]
  ]
}

.babelrc.js version Specify the plugin in your .babelrc.js file with the custom root or alias. Here's an example:


const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ["./src/"],
      alias: {
        "test": "./test"
      }
    }

  ]

];

Good example: https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91

Collectives™ on Stack Overflow

React how can i use @import

2 Answers 2

Comments

babel-plugin-module-resolver

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

babel-plugin-module-resolver

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related