npm start did not create tsconfig file

[Josephenoch]

Describe the bug

I created a new repo with CRA, now I want to work ts. I have installed it and all others. But as I run npm start, there is no autogenerated tsconfig file and the docs said it will be created

Did you try recovering your dependencies?

Yes I did

Which terms did you search for in User Guide?

tsconfig.json file not autogenerated adding typescript after CRA

Environment

Environment Info:

current version of create-react-app: 5.0.1 running from C:\Users\hp\AppData\Local\npm-cache_npx\c67e74de0542c87c\node_modules\create-react-app System: OS: Windows 10 10.0.19044 CPU: (4) x64 Intel(R) Core(TM) i7-4610M CPU @ 3.00GHz Binaries: Node: 14.15.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62) Internet Explorer: 11.0.19041.1566 npmPackages: react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 react-scripts: 5.0.1 => 5.0.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Start a new project with npx create-react-app <appName>
2. Install typescript and other required dependencies from the CRA docs
3. run npm start as instructed in the docs

Expected behavior

I expected a tsconfig.json to be created to ensure the .tsx and .ts files are compiled with tsx

Actual behavior

The tsconfig.json file was not auto generated.

[gkio]

@Josephenoch when you create app you have to add flag --template typescript take a look at the docs

start script does not generate files the template generate files if you dont want to reinitialise your app with cra create your own tsconfig.json file and if you dont know how just copy from template in source code

[jabaa]

@gkio In that case the documentation is really confusing or missing this important step: https://create-react-app.dev/docs/adding-typescript/

To add TypeScript to an existing Create React App project, first install it:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!

I can't find the tsconfig.json in the source code of the template.

[gkio]

@jabaa this is migration scenario you are watching the npm install / yarn add means you are installing dependencies not generating app. if you want to generate you have to yarn create / npx create when you are migrating you have to do it manually the file creation

[jabaa]

@gkio Yes, I understand. I migrated my app from JavaScript to TypeScript and I followed the quoted instructions. First, I've installed

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Then, I renamed the files. Finally, I restarted the server. Obviously, the step regarding the tsconfig.json is missing in the migration instructions. The next paragraph suggests, that the file will be automatically created in either case.

You are not required to make a tsconfig.json file, one will be made for you.

Nowhere does it mention that the file is only created in the project generation scenario and not in the migration scenario. And since tsconfig.json isn't mentioned in the migration instructions, this is really confusing and causing questions on Stackoverflow, Github and other platforms.

Again, this is the complete instructions for the migration:

To add TypeScript to an existing Create React App project, first install it:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!

Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, see here.

I didn't skip anything.

Where can I find the tsconfig.json that can be used with my project? I can't find any tsconfig.json in the template sources.

[gkio]

@jabaa it creates dynamically https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js (create in a sandbox cra with template typescript and copy ts config)

[gkio]

{
  "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-jsx"
  },
  "include": [
    "src"
  ]
}

[Josephenoch]

I created a PR to update the docs so that it is a little less confusing to people. Here's the link https://github.com/facebook/create-react-app/pull/12663#issuecomment-1214144574

[gkio]

@Josephenoch i think its redundant. the npm packages on install should not create files its by default understood

[jabaa]

@gkio You want to keep wrong instructions because you know the technical details? People who follow the instructions won't get the described behavior. It should be documented that the tsconfig.json has to be manually created between

rename any file to be a TypeScript file

and

restart your development server!

otherwise the project won't build.

[John-Dennehy]

@Josephenoch i think its redundant. the npm packages on install should not create files its by default understood

The docs are are absolutely misleading people into thinking the tsconfig does not need manually adding based on even the quickest search of people with the same issue.

[Josephenoch]

I think its best that the docs clearly state that we should create a tsconfig file. It is confusing to the newbies. Also, a link to a generic and basic ts configuration should be provided to help the newbies.