how to config absolute paths with 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"
}