JavaScript to TypeScript migration not being triggered

[runoncedev]

Summary

I'm trying to migrate a Next.js project from JavaScript to TypeScript. Tried to follow the docs:

To add TypeScript to an existing project, rename a file to .ts / .tsx. Run next dev and next build to automatically install the necessary dependencies and add a tsconfig.json file with the recommended config options.

I renamed multiple files to .ts and .tsx and run both next dev and next build but no new dependency was added and no tsconfig.json file was created, although everything seems to be working fine.

What I'm missing?

You can view the code repo branch here:

• https://github.com/runoncedev/runonce/tree/ts-migration

Additional information

npm run info

> resume@0.1.0 info
> next info


Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Mon Apr 22 20:49:37 PDT 2024; root:xnu-8796.141.3.705.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.19
  pnpm: 10.8.0
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: 15.3.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

### Example

https://github.com/runoncedev/runonce/tree/ts-migration

[guptaksht10]

hey @runoncedev you might forget to include tsconfig.json in your project,
include this in code in tsconfig.json might help
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
}

[runoncedev]

Thanks, but I was looking for a way to get the tsconfig.json file generated automatically.

[icyJoseph]

A bit odd, but you need to change an app file or page file:

app
├── layout.js
├── photos
│   ├── [id]
│   │   └── page.js
│   ├── layout.js
│   └── page.tsx
├── providers.js
└── resume-new
    ├── more-experience.js
    └── page.js

For example, here I do app/photos/page.tsx, and that kick starts the migration process.

[runoncedev]

Thank you! That worked as expected. IMO the documentation should be a bit more clear about which files you need to rename.

[icyJoseph]

Yes, I'll try to add some precision about it. I just want to double check with the team, that this is not somehow borked 😄