Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

typeError: Cannot assign to read only property 'paths' of object for compilerOptions in tsconfig

**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

like image 451
Mithun Shreevatsa Avatar asked Oct 29 '20 14:10

Mithun Shreevatsa


People also ask

What is Tsconfig json in TypeScript?

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.

What is include in Tsconfig json?

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.

Where can I find Tsconfig json?

The tsconfig. json is generally put in the root folder of the project. 2. It provides the compiler options required to compile the project.


3 Answers

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"
  ]
}
like image 153
lucsrods Avatar answered Nov 15 '22 08:11

lucsrods


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.

like image 36
Ryan Kennel Avatar answered Nov 15 '22 06:11

Ryan Kennel


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.

enter image description here

like image 43
DrShaffopolis Avatar answered Nov 15 '22 08:11

DrShaffopolis