Adding TypeScript to existing project does not add tsconfig

[mwisnicki]

Describe the bug

If you follow https://create-react-app.dev/docs/adding-typescript and attempt to add TypeScript to existing project using

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

The resulting changes will obviously not include tsconfig, unlike newly created projects and contrary to next section of manual.

Environment

create-react-app: 4.0.3

Steps to reproduce

npx create-react-app my-app
cd my-app
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
cat tsconfig.json

Expected behavior

Default tsconfig.json file is added to the project if you follow documentation.

Actual behavior

No tsconfig.json :(

[theonlyway]

According to the docs you need to specify the typescript template no? You are missing --template typescript at the end of your create command

Doing it the way you have listed in your steps is how I created my initial app and I'm going through and converting to typescript now. You are correct that in this scenario have to install the types then generate the tsconfig.json file manually yourself and instead of doing it entirely manually I just ran npx tsc --init to have it generate one for me. Funny enough after I ran npm start it overwrote the tsconfig.json file that npx tsc --init created...

[mwisnicki]

According to the docs you need to specify the typescript template no? You are missing --template typescript at the end of your create command

This is about adding typescript to existing project. Documentation steps are currently incomplete.
Thanks for the npx tsc --init tip - this should be added to docs.

[mwisnicki]

Although the config generated by npx tsc --init is not necessarily the same as the one created by cra so this needs to be investigated first.

[petetnt]

Hi @mwisnicki,

CRA automatically creates an tsconfig.json file for you when it notices a .ts file in your source folder. The default setup looks like this:

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

You can see the relevant code in

https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L46-L55

[schriker]

I have the same problem used to create a new app:

npx create-react-app my-app
cd my-app
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Renamed files to .tsx and .ts run npm start and scripts don't seem to detect that I'm trying to use TS because no tsconfig.json is created. Have to create it manually to make it works.

Node: v16.13.0
NPM: 8.3.2
System: MacOS

[laurmurclar]

I'm also seeing this problem when trying to add TS to an existing app

npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/lauramurphy-clarkin/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 11.6.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 97.0
    Safari: 15.3
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

As a workaround, I created a new react app by running:
npx create-react-app ts-example --template typescript
And then copy-pasted the contents of the generated tsconfig.json into my existing app.

[tabuckner]

Same issue for me. Started a project w/o --template typescript, ran the command listed in docs for adding TS to existing project, changed App.js to App.tsx, restarted dev server, no tsconfig.json. Tried again w/ index.js to index.tsx, restarted dev server, no tsconfig.json. Tried with a deeply nested child component, restarted dev server, no tsconfig.json.

[camjackson]

Yep same here, when I try to run my app I get e.g.

Module not found: Error: Can't resolve './App' in '/path/to/repo/src'

No tsconfig has been generated, despite there being .ts and .tsx files in my src directory, and having added the relevant ts dependencies.

[ioniall]

I've run into this issue as well upgrading a project to typescript, using react-scripts 5.0.1.

In an attempt to diagnose what was going on, since there are only a few hits on this searching the problem, I setup 2 new projects.

First, is the npx create-react-app myapp non-typescript-template project;

• Let it run and install as is
• Builds as expected
• Run npm install --save typescript @types/node @types/react @types/react-dom @types/jest
• Change a file to tsx, didn't matter which one, any change had the same result
• No tsconfig.json generated (as spoken about in the documentation), build fails with the errors already reported here

Second, run npx create-react-app myappts --template typescript typescript-template project;

• Let it run and install as is
• Builds as expected

Observations;

Copying the generate tsconfig.json from the typescript-template project (myappts) to the non-typescript-template project (myapp) didn't resolve the issue. The errors relate to the svg import etc.

Additionally copying the typescript-template project (myappts) react-app-env.d.ts over got the non-typescript-template project (myapp) got the project to build.

As an alternative, downgrading to react-scripts@4 in the non-typescript-template project (myapp), then changing a file to tsx and run a build generates the two required files. A subsequent upgrade to react-scripts continues to generate successful builds.

[ioniall]

There are some questions on StackOverflow relating to this issue as well.

https://stackoverflow.com/q/70397360/3747990