Repository: create-react-app
Issue: npx create-react-app <app-name> --template typescript "Unable to generate a basic tsconfig.json file"; with solutions
Labels: needs triage,issue: bug report

# Error Arising in typescript project

I am new to react. So apologies if I am going out of bounds. But, based on the old videos. I project seems to work flawlessly after running the command:

1. logo.svg: unable to interpret what is logo.svg.
2. "web-vitals" update renders "reportWebVitals.ts" outdated and crash-prone ("Throw error").
3. The absence of  "tsconfig.json" file makes it unable to run the react app on the go after creation.
4. The conflicts between packages are caused by varying updates in various packages. (can be fixed with package.json provided to working condition).
5. Calls to the reportWebVitals.ts need modification with the new update in the web-vital.js.

The changes below will render the project on the computer smoothly, with new updates in the packages.

```bash
npx create-react-app <app-name> --template typescript
```
but, with current updates the above trigger a lot of errors.

Which include typescript errors and the absence of tsconfig.json file. Which we have to add and configure.

# I would suggest the following changes to the template download
## Step 1: package.json file
```json
{
  "name": "<app-name>",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.7.2",
    "web-vitals": "^4.2.4"
  },
  "devDependencies": {
    "@types/jest": "^29.5.14",
    "@types/mocha": "^10.0.10",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "eslint": "^8.57.1",
    "eslint-config-react-app": "^7.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

## Step 2: tsconfig.json

```json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "allowJs": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext" // Change this to "esnext" or "commonjs"
  },
  "include": [
    "src"
  ]
}

```

## Step 3: Add the Declaration file to the src folder "src/declarations.d.ts"; for the logo.svg error

```typescript

declare module '*.svg' {
    const content: string;
    export default content;
}

```

## Step 4: Modifying the reportWebVitals.ts file for new updated web-vitals.js

```typescript
import { onCLS, onFCP, onLCP, onTTFB } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: (metric: any) => void) => {
  if (onPerfEntry && typeof onPerfEntry === 'function') {
    onCLS(onPerfEntry);
    onFCP(onPerfEntry);
    onLCP(onPerfEntry);
    onTTFB(onPerfEntry);
  }
};

export default reportWebVitals;

```