An import path cannot end with a '.tsx' extension in Visual Studio Code

[jy95]

trafficstars

Describe the bug

With

// @ts-ignore
import ReloadWrapper from "../Others/ReloadWrapper.tsx";

I am able to run my project but cannot enjoy Typescript typing in Visual Studio Code. If I remove the @ts-ignore to get them back :

With

import ReloadWrapper from "../Others/ReloadWrapper";

Webpack doesn't recognize the import

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

• An import path cannot end with a '.tsx' extension

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from C:\Users\jy95\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app

Steps to reproduce

1. Have Visual Studio Code 1.68.1
2. Git clone https://github.com/jy95/jy95.github.io.git
3. Remove a // @ts-ignore somewhere (for example import ReloadWrapper from "../Others/ReloadWrapper.tsx"; )
4. Tada

Expected behavior

No error

Actual behavior

An import path cannot end with a '.tsx' extension

Reproducible demo

https://github.com/jy95/jy95.github.io master branch

[kelcharge]

If you haven't got this sorted yet, I am able to resolve this issue by adding a tsconfig.json file to the root directiory and then dropping the extension on the import.

Steps I took to resolve:

• npm install typescript -g
• tsc --init

[oparaskos]

That solved it for me. its worth noting the guide says You are not required to make a [tsconfig.json file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. You are allowed to edit the generated TypeScript configuration. which is probably in reference to creating an app from scratch, but is confusing given the page is called 'Adding Typescript' and also covers adding it to an already existing project.

You'll also want to add a file in src/ called 'react-app-env.d.ts' with this content

/// <reference types="react-scripts" />

which is also normally created by create-react-app for you. It allows for things like importing svg as a module.

[oparaskos]

I've created a PR to update the guide to hopefully be more clear https://github.com/facebook/create-react-app/pull/12595

[GustaSilvaBr]

Hello, folks! I just solved that by using tsconfig.json

After create your tsconfig.json file you just need to past the following settings:

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

Then, you can import components without use ''tsx" extension

[Prathamesh-Pitale]

Hello, folks! I just solved that by using tsconfig.json

After create your tsconfig.json file you just need to past the following settings:

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

Then, you can import components without use ''tsx" extension

Thanks a lot, It worked for me. Was struggling for long time

[wasit-shafi]

If you haven't got this sorted yet, I am able to resolve this issue by adding a tsconfig.json file to the root directiory and then dropping the extension on the import.

Steps I took to resolve:

• npm install typescript -g
• tsc --init

how can avoiding the extension solve the problem, assume we have the same file with different extensions eg sample.js & sample.ts, it seems we have to update the tsconfig/webpack configurations Thanks

[wasit-shafi]

Hello, folks! I just solved that by using tsconfig.json

After create your tsconfig.json file you just need to past the following settings:

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

Then, you can import components without use ''tsx" extension

same applies for the .jsx and .tsx, skipping the extension will only fix the problem not solve the actual problem

Refer Comment: https://github.com/facebook/create-react-app/issues/12527#issuecomment-1474140557