cómo configurar rutas absolutas con el ejemplo de código de reacción

Ejemplo: cómo configurar rutas absolutas con react

////////////
/////Revolver — a library that helps in locating a module by its absolute path.
/////In Webpack configuration file, add resolve.alias in order to create aliases in to import modules more easily.
///////////////
module.exports = {  
  //...  
  resolve: {    
    alias: {      
      Components: path.resolve(__dirname, 'src/components/')    
    }  
  }
};

/////For instance, all modules that live inside src/components/ can now use absolute paths.

///////////////////////////////////////////////
///If for any reason you don’t want to touch your Webpack configurations or you are using create-react-app and you don’t want to use the eject command, you can use a Babel plugin called babel-plugin-module-resolver.
////To activate this plugin, create a .babelrc file (if it’s not already part on your folders structure) and add this code to it:
//////////////

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      alias: {
        Components: path.resolve(__dirname, 'src/components/')
      }
    }]
  ]
}
///////////////////
//Code Editor Recognize Those Paths? (VS code)
///Create a jsconfig.js file and add the following code to it:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  },
  "exclude": ["node_modules"] 
}
//// the above didnt work try adding  NODE_PATH=src in next with the package.json file at the script file
//example below 
"scripts": {
    "start": "NODE_PATH=src react-scripts start",
    "build": "NODE_PATH=src react-scripts build",
    "test": "NODE_PATH=src react-scripts test",
    "eject": "react-scripts eject",
    "format": "./node_modules/.bin/eslint --fix --ignore-path .gitignore ."
  },
 ///// if the above did solve it try doing this
 /// Using cross-env is the solution. Read more here.
//Install cross-env: by doing  npm install cross-env
    ///// You should update to:
 "scripts": {
  "start": "cross-env NODE_PATH=./src node scripts/start.js",
  "build": "cross-env NODE_PATH=./src node scripts/build.js",
  "test": "cross-env NODE_PATH=./src node scripts/test.js --env=jsdom",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

---

---

Utiliza Nuestro Buscador