how to specify a path relative to the project root?

Question

This is what one of my import paths look like:

import Register from "../../../../../../../../src/components/register/Register";

How can I specify paths relative to the root of the project folder?

Answer 1

Module builder configuration specifies it.

For eg Webpack 2:

module.exports = {
...

resolve: {
    modules: [
        'node_modules',
        path.resolve(__dirname + '/src')
    ],
    alias: {
        src: path.resolve(__dirname + '/src')
    }
},

...}

Then you can import like this:

import Register from "src/components/register/Register";

Answer 2

If you're using a webpack configuration file, you can add the following to create absolute paths:

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

Now instead of ../../../../../../../../src/components/register/Register you can do Components/register/Register .

If you don't have a webpack configuration file, like in the case of react-create-app , and you don't wanna touch the webpack configuration file in your node_modules , you might wanna have a look at customize-cra & react-app-rewired