You can solve it using 5 simple steps withou eject:
Step 1: Adding react-app-rewired into your devDependencies
.
yarn add -D react-app-rewired
or npm intall react-app-rewired --save-dev
Step 2: After installation, you'll be able 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.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
I've added in the root of my project. the usual
tsconfig.json` however if your using Create React App you may want to add an additional file for the paths callledtsconfig.base.json
and extend it in you're initial main tsconfig it will loolk like this ``` json { "compilerOptions": { "baseUrl": ".", } } ```