npx create-react-app <app-name> --template typescript "Unable to generate a basic tsconfig.json file"; with solutions

[rjosh003-CS]

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.

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

{
  "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

{
  "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

declare module '*.svg' {
    const content: string;
    export default content;
}

## Step 4: Modifying the reportWebVitals.ts file for new updated web-vitals.js

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;

[igorlnunes]

Using this command:

npx create-react-app <app-name> --template typescript

After deleting the /node_modules and packjson-lock.json at the directory project;

Following up the 4 steps above and finally run npm start I could running the React App Page normally. Thanks for help.

[webjohnjiang]

Thank you, Is nobody maintain the creat-react-app project?