BUG: TS2488 whenever `.js` file is renamed to `.ts`

Bug Report

Sometimes when I try to rename a .jsx or .js file to .ts or .tsx I get a really frustrating error in my typescript compilation.

TypeScript error in undefined(undefined,undefined):
Type 'never' must have a '[Symbol.iterator]()' method that returns an iterator.  TS2488

I took a long time to figure out that the renaming of the files was the issue. I had this going on for a few times and had to rollback to my latest working commit and merge file by file only to figure out that everything works and the code was exactly the same as the broken code. I have no idea why this happens and starting to suspect it is a bug with typescript.

Today it happened again with a simple react component rename. this was the component before typescript migration.
If I rename it back to .js or .jsx it works just fine. I've tried to change the filename entirely (not just the extension) and it still does not work.

/* eslint-disable require-jsdoc */
import React from 'react';
import classes from './TableFooter.module.css';
import ButtonPaginateNext from '../Buttons/Pagination/ButtonPaginateNext';
import ButtonPaginateEnd from '../Buttons/Pagination/ButtonPaginateEnd';
import ButtonPaginateBeginning from '../Buttons/Pagination/ButtonPaginateBeginning';
import ButtonPaginatePrevious from '../Buttons/Pagination/ButtonPaginatePrevious';

const TableFooter = ({
  pageNo,
  page,
  handleNext,
  handleBeginning,
  handlePrevious,
  handleEnd,
}) => (
  <div className={classes.FlexWrapper}>
    <div className={classes.FlexItem}>
      {`${page} de ${pageNo}`}
    </div>
    <div className={classes.BtnWrapper}>
      <div className={classes.FlexItem}>
        <ButtonPaginateBeginning />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginatePrevious />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginateNext />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginateEnd />
      </div>
    </div>
  </div>
);

export default TableFooter;

I made some small changes and got to this:

/* eslint-disable require-jsdoc */
import React from 'react';
import classes from './TableFooter.module.css';
import ButtonPaginateNext from '../Buttons/Pagination/ButtonPaginateNext';
import ButtonPaginateEnd from '../Buttons/Pagination/ButtonPaginateEnd';
import ButtonPaginateBeginning from '../Buttons/Pagination/ButtonPaginateBeginning';
import ButtonPaginatePrevious from '../Buttons/Pagination/ButtonPaginatePrevious';

export interface ITableFooterProps {
  pageNo: number,
  page: number,
  handleNext: () => void,
  handleBeginning: () => void,
  handlePrevious: () => void,
  handleEnd: () => void,
}

const TableFooter: React.FC<Partial<ITableFooterProps>> = ({
  pageNo,
  page,
  handleNext,
  handleBeginning,
  handlePrevious,
  handleEnd,
}) => (
  <div className={classes.FlexWrapper}>
    <div className={classes.FlexItem}>
      {`${page} de ${pageNo}`}
    </div>
    <div className={classes.BtnWrapper}>
      <div className={classes.FlexItem}>
        <ButtonPaginateBeginning />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginatePrevious />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginateNext />
      </div>
      <div className={classes.FlexItem}>
        <ButtonPaginateEnd />
      </div>
    </div>
  </div>
);

export default TableFooter;

After this, everything was working fine even if this typescript compliant code was left as a .jsx file. But if I change it to a .tsx file. It break with that horrible untracable error. What might be the problem.

I'm using the default tsconfig.json provided by create-react-app: ^17.0.2.

{
  "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",
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ],
    "resolveJsonModule": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "../backend",
    "../backend/**",
    "./src/ZExclude"
  ]
}

My TS version is 4.1.2

The docs say that only extension rename should work. here

UPDATE

After I create a new file (.ts) with a different filename and copy all the contents of the file (.js) I cannot delete the old .js file. Even if it is not imported in any other file. If I delete this .js file I get the same frustrating error. I´ve tried to re-install typescript and updated to version 4.3.2. Still getting the same error.

🔎 Search Terms

Type 'never' must have a 'Symbol.iterator' method that returns an iterator. ,
TS2488,
JS migration,
rename js file,

🕗 Version & Regression Information

TS 4.1.2

• This is a crash

Start with the provided TableFooter component and tsconfig.json, then reproduce the rename from .js/.jsx to .ts/.tsx with TypeScript 4.1.2 and 4.3.2. Done means isolating a minimal reproduction for the TS2488 diagnostic or crash and documenting the behavior in a regression test.