i'm using create-react-app
+ typescript, and i want to add absolute paths.
i'm trying to get to the point i can use absolute paths, like so:
instead of import x from '../../../components/shell/shell'
use import x from '@components/shell/shell'
;
here is tsconfig.json file:
{
"extends": "./paths.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"baseUrl": "src",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
I'm using extended file for paths, because from some reason npm start
overrides the file.
so is paths.json file:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@": ["./src"],
"@components/*": ["components/*]"
}
}
}
i also have an .env file:
NODE_PATH=src
i installed react-app-rewire
so i can config the paths,
and my config-ovverrides.js file looks like this:
module.exports = {
paths: function(paths, env) {
// ...add your paths config
return paths;
}
};
im stuck with connecting all the dots, it doesn't work and i still cant see what i need to do in order to config the webpack path object;
how can i implement paths in cra, ts, and rewire?
You can solve it using 5 simple steps Without eject:
Step 1: Adding react-app-rewired into your devDependencies
.
yarn add -D react-app-rewired
or npm install react-app-rewired --save-dev
Step 2: After installation, you need to change package.json
default ReactsJS scripts to:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
Step 3: Creates a new file called tsconfig.paths.json
on root path, with content like:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": ["./src/shared/services/*"],
"interfaces/*": ["./src/shared/interfaces/*"]
}
}
}
Tip 1: You can choose which path you want to use, like:
@services, @interface, @src, ~, @, etc
just by changing the keys inside "paths": {}
The same is applied to it's value: ["src/shared/services/"], ["src/shared/interfaces/"], ["src/*"]
, use the relative path here.
Step 4: Into tsconfig.json
, before "compilerOptions"
you need to extends the tsconfig.paths.json
you just created.
Like this:
{
"extends": "./tsconfig.paths.json",
...//rest of file infos compilerOptions, include... whatever
}
Step 5: Creates a new file config-overrides.js
, adding your alias and relative paths on it:
const path = require('path');
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
'services': path.resolve(__dirname, 'src/shared/services'),
'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
},
};
return config;
};
Tip 2: If you're using eslint
, remember to have an .eslintignore
file and add config-overrides.js
within it.
Restart your IDE or text editor, in my case VSCode.
It's DONE! Now just run yarn start
or npm run start