React/Typescript /VScode - an import path cannot end with a '.tsx' extension

Question

I have a series of react projects which I have converted to typescript. Some of these use webpack, and some of them just use babel as they're libraries which are consumed by the other (webpack) projects/actual applications.

I've converted everything to typescript without problems, except in one non-webpack project, where I receive the error 'an import path cannot end with a .tsx extension', for example on

import LoadingLogo from '../ui/LoadingLogo.tsx';

I can get round this by omitting the extension, or using // @ts-ignore, but neither of these are optimal solutions, since the project will be a mix of jsx and tsx while it is being refactored and I'd like to be able to see at a glance which file type is being used in the import.

The steps I've taken to convert the project to typescript are

1. Install typescript
2. Install @babel/preset-typescript
3. add

presets: [ @babel/preset-typescript ]

to my babel.config.js

To make matters even more confusing, in one of the other (non-webpack) apps, I've got the same babel setup running and I'm not seeing this issue. Is there something obvious I'm missing? For reference, my babel.config in the project with the issue looks like this

module.exports = function(api) {
  api.cache(true);

  return {
    ignore: ['node_modules/**/*'],
    presets: [
      ['@babel/preset-typescript'],
      [
        '@babel/preset-env',
        {
          loose: true,
          targets: {
            node: 'current'
          }
        }
      ],
      '@babel/preset-react'
    ],
    env: {
      translations: {
        plugins: [
          'syntax-async-functions',
          '@babel/plugin-syntax-dynamic-import',
          'dynamic-import-node',
          [
            'react-intl',
            {
              messagesDir: './messages',
              enforceDescriptions: false
            }
          ]
        ]
      },
      production: {
        plugins: [
          'jsx-strip-ext',
          [
            'babel-plugin-styled-components',
            {
              ssr: true
            }
          ],
          'syntax-async-functions',
          '@babel/plugin-syntax-dynamic-import',
          'dynamic-import-node'
        ]
      },
      development: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              ssr: true
            }
          ],
          'syntax-async-functions',
          '@babel/plugin-syntax-dynamic-import',
          'dynamic-import-node'
        ]
      }
    },
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-syntax-import-meta',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-json-strings',
      '@babel/plugin-transform-classes'
    ]
  };
};

and my babel config in the non-webpack project without the issue looks like this

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ['@babel/preset-typescript'],
    ignore: ['node_modules/**/*'],
    extends: 'myProject/babel.config.js',
    env: {
      production: {
        plugins: [
          [
            'module-resolver',
            {
              alias: {
                '^myProject/src/(.+)': 'myProject/lib/\\1'
              },
              extensions: ['.js', '.jsx'],
              stripExtensions: ['.js', '.jsx']
            }
          ],
          [
            'babel-plugin-styled-components',
            {
              ssr: true
            }
          ],
          'syntax-async-functions',
          '@babel/plugin-syntax-dynamic-import',
          'dynamic-import-node'
        ]
      },
      development: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              ssr: true
            }
          ],
          'syntax-async-functions',
          '@babel/plugin-syntax-dynamic-import',
          'dynamic-import-node'
        ]
      }
    }
  };
};

tsconfig.json for both projects looks like this

{
  "compilerOptions": {
    "module": "esnext",
    "outDir": "dist/",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "ESNext",
    "allowJs": true,
    "checkJs": false,
    "jsx": "react",
    "pretty": true,
    "skipLibCheck": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["dom", "dom.iterable", "ESNext"],
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

My first instinct was to look at the module resolver plugin, but that didn't seem to make any difference. Is there something obvious I'm missing?

Answer 1

you need to find @typescript-ESLint in node_modules, open the folder and open the next folder named "@typescript-ESLint", inside this folder modify the file called "package.json".(You should find all of these files/folders for typescript and do this.) Inside the file you should add this:

"compilerOptions": {
      "allowImportingTsExtensions": "iKnowWhatImDoing"
    },
    "resolve": {
        "extensions": [".js", ".json", ".ts", ".tsx"],
      }

Answer 2

I renamed my file to navMenus.ts from navMenus.tsx AND changed the way I imported it from:

import { navMenus } from "../../views/navMenus.tsx";

to

import { navMenus } from "../../views/navMenus";

this solved the issue

Answer 3

To solve your problem, you need:

1. Make sure that you have a tsconfig.json file in the project.json with code

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

2. Check or create a react-app-env.in.ts file with the code

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

It is this react-app-env.d.ts file that explains TypeScript how to work with ts, tsx, and so on file extensions

3. Remove tsx file extensions in imports. Also remove all extensions that TypeScript will swear at

For example before:

import { Header } from "./Header.tsx";

This should be the case after removing extensions:

import { Header } from "./Header";

4. If you had a project running at the time of these changes, stop it and start it again. Since these changes are applied only when the project is started at the compilation stage

Answer 4

Sometimes this can be fixed by creating a next.config.js and a tsconfig.json at root level and re-run the application.

Answer 5

I added this to my webpack.config.js and it helped

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

You might want to add '...' to the end of the array so that it can resolve other extensions. More info about webpack's resolve extension here: https://webpack.js.org/configuration/resolve/#resolveextensions

Answer 6

I'm sorry to say that I doubt you are going to be able to resolve this in the way you desire. TypeScript (specifically TSC) disallows explicit extensions for ts/tsx files... It has to do with implicit file extensions in imports, and how ts/tsx files are compiled down to js/jsx files. The world may not be happy about it, but it seems to be the way that it is.

You could use // @ts-ignore, but then I think you would lose intellisense

Update: it has come to my attention from comments below that some TypeScript tools do allow extensions. Evidently Deno requires them, though I have not worked with Deno. The TSC compiler disallows them.