Imports path in react

Question

Hello I have a lot of imports to reducex e.g.

import {groupAddTeacher} from "../../../../../../redux/actions/group";
import {groupAddEvent} from "../../../../../../redux/actions/group";

How can I replace a path by excluding ../../../../../../

I using webpack

entry: "./src/index.js",

If you Google "webpack absolute import" there's a bunch of articles and tutorials and such on how to get absolute importing working. The actual specific config may vary depending on your webpack version. — Jayce444
– Jayce444, Commented Mar 7, 2019 at 11:40

Avanthika · Accepted Answer · 2019-03-07 11:42:02Z

6

Use webpack's resolve: https://webpack.js.org/configuration/resolve/

resolve: {
  modules: ['src/redux', 'node_modules'],
  extensions: ['.jsx', '.js'],
  unsafeCache: true,
  alias: {
    actions: path.resolve(__dirname, 'src', 'redux', 'actions')
  }
}

Then you can do

import { groupAddEvent, groupAddTeacher } from 'actions/group';

Hope this solves your problem!

answered Mar 7, 2019 at 11:42

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2019-03-07 12:25:16Z

1

You can give a alias in your module exports

alias: {
    src: path.resolve(__dirname + '/root')
}

Then you can do something like:

import { groupAddTeacher }from 'root/redux/actions/group'

edited Mar 7, 2019 at 12:25

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Mar 7, 2019 at 11:41

Jibin Mathews

1,1351 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

Imports path in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest