**Trying to set the path inside tsconfig.json for compiler to treat src as baseUrl in react typescript project**
{
"compilerOptions": {
"target": "es5",
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
"include": [
"src"
]
}
But getting error as below:
TypeError: Cannot assign to read only property 'paths' of object '#<Object>'
at verifyTypeScriptSetup (/Users/apple/Documents/projects/my-app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
Is this because of the folder permission or anything missing in the configuration
json file is a file of JSON format which allows us to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root.
The tsconfig.json file specifies the root files and the compiler options required to compile the project. JavaScript projects can use a jsconfig.json file instead, which acts almost the same but has some JavaScript-related compiler flags enabled by default.
The tsconfig. json is generally put in the root folder of the project. 2. It provides the compiler options required to compile the project.
Apparently, there's a bug in [email protected].
The workaround that solved for me was:
Downgrade react-scripts
:
yarn add [email protected]
Create a paths.json
in the project's root:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@Components/*": ["components/*"]
}
}
}
Add an extends
to tsconfig.json
:
{
"extends": "./paths.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
Per the GitHub issue, if you just delete the tsconfig.json file then run "npm start" it will recreate the tsconfig.json file for you and everything will work fine.
I fixed it with the following change:
As was previously mentioned, deleting your tsconfig and letting it auto-create a default one also fixes the issue. If you're like me, though, you may have been alarmed for a second that you can only use the default config, with the workaround breaking your base path for absolute imports. (not so - phew!)
Specifically, the setting I had that was breaking post-upgrade was compileOnSave, which is no longer necessary to specify.
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