javascript - Relative Imports in React.js

Question

Currently I have an import which looks like this

import Button from "../../../components/Button/Button"

but I want to make it relative so I wouldn't require to type the ../../../ time and again.

I want to import using this method:

import Button from "components/Button/Button" or src/components/Button/Button

but please also assure that it will work on both production and development.

question from:https://stackoverflow.com/questions/65713724/relative-imports-in-react-js

Answer 1

If you are using webpack. You can use resolve.

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
      Components: path.resolve(__dirname, 'src/components/'),
    }
  }
};

Now, instead of using relative paths when importing like so:

import Utility from '../../utilities/utility';
import Button from '../../src/components/Button';

you can use the alias:

import Utility from 'Utilities/utility';
import Button from 'Components/Button';