I'm trying to map paths in tsconfig.json to get rid of relative paths hell. My React App is based on Create-React-App. I tried this SO thread and added paths in my tsconfig.json. My tsconfig.json is as
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"strictNullChecks": false
},
"include": [
"src"
]
}
when I compile my project in VS Code, it removes the paths entry from tsconfig.json with the following message. Why alias imports are not supported in my react-scripts based React Project?
You don't need craco
for fixing the problem like that anymore. I've solved this issue by moving the baseUrl
to the main tsconfig.json
file like below:
tsconfig:
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"baseUrl": "./src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"noImplicitAny": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
tsconfig.path.json:
{
"compilerOptions": {
"paths": {
"api/*": ["api/*"],
"assets/*": ["assets/*"],
"config/*": ["config/*"],
"components/*": ["components/*"],
"hooks/*": ["hooks/*"],
"pages/*": ["pages/*"],
"store/*": ["store/*"],
"constant/*": ["constant/*"],
"types/*": ["types/*"],
"utils/*": ["utils/*"]
}
}
}
I made to Angelo P's answer work by changing the config-overrides.js
to
const path = require('path');
module.exports = function override(config, env) {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
"@src": path.resolve(__dirname, 'src/'),
"@api": path.resolve(__dirname, "src/API/"),
"@assets": path.resolve(__dirname, "src/assets/"),
"@components": path.resolve(__dirname, "src/components/"),
"@containers": path.resolve(__dirname, "src/containers/"),
"@css": path.resolve(__dirname, "src/css/"),
"@customHooks": path.resolve(__dirname, "src/CustomHooks/"),
"@helperFuncs": path.resolve(__dirname, "src/HelperFuncs/"),
"@hoc": path.resolve(__dirname, "src/hoc/"),
"@middlewares": path.resolve(__dirname, "src/middlewares/"),
"@models": path.resolve(__dirname, "src/models/"),
"@store": path.resolve(__dirname, "src/store/"),
"@actions": path.resolve(__dirname, "src/store/actions"),
"@reducers": path.resolve(__dirname, "src/store/reducers/"),
"@sagas": path.resolve(__dirname, "src/store/sagas/"),
"@typings": path.resolve(__dirname, "src/Typings/"),
"@utils": path.resolve(__dirname, "src/utils/")
},
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.d.ts']
};
return config;
};
Works like a charm, but the only thing missing is VSCode autocompletion. React starts up with this warning:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
So I'm assuming it removes the path
field from the tsconfig.json and VSCode cannot pick up the aliases, so ESLint
and TS
give the following errors in VSCode, but everything works fine.
Unable to resolve path to module '@typings/...'.eslintimport/no-unresolved
Cannot find module '@typings/...' or its corresponding type declarations.ts(2307)
Anyone has a solution for this?
UPDATE
Managed to get it all working by making these changes:
tsconfig.paths.json
{
"compilerOptions": {
"paths": {
"@src/*": ["./src/*"],
"@api/*": ["./src/API/*"],
"@assets/*": ["./src/assets/*"],
"@components/*": ["./src/components/*"],
"@containers/*": ["./src/containers/*"],
"@css/*": ["./src/css/*"],
"@customHooks/*": ["./src/CustomHooks/*"],
"@helperFuncs/*": ["./src/HelperFuncs/*"],
"@hoc/*": ["./src/hoc/*"],
"@middlewares/*": ["./src/middlewares/*"],
"@models/*": ["./src/models/*"],
"@store/*": ["./src/store/*"],
"@actions/*": ["./src/store/actions*"],
"@reducers/*": ["./src/store/reducers/*"],
"@sagas/*": ["./src/store/sagas/*"],
"@typings/*": ["./src/Typings/*"],
"@utils/*": ["./src/utils/*"]
}
}
}
Note the *
at the end of @.../*
tsconfig.json
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext",
"es2015.promise"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
],
"resolveJsonModule": true,
"baseUrl": ".",
},
"include": [
"src",
"src/**/*.ts"
]
}
npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript
.eslintrc.json
{
...,
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"]
},
"typescript": {}
}
}
}
Path aliases are no longer supported
you can do this now, to directly import files relative to the src
directory
go to your jsconfig.json
file add base URL to be "."
"compilerOptions": {
"baseUrl":".",
...
then you can directly import stuff from the src
directory
import Myfile from "src/myfile.js"
You have to add "baseUrl": ".",
to you compiler options and than you can use the import src/your/path
directly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With