React / Typescript / VScode - путь импорта не может заканчиваться расширением .tsx

Question

У меня есть серия проектов реагирования, которые я преобразовал в машинопись. Некоторые из них используют webpack, а некоторые просто используют babel, поскольку они являются библиотеками, которые используются другими (webpack) проектами / реальными приложениями.

Я без проблем преобразовал все в машинопись, кроме один проект, не относящийся к webpack, где я получаю сообщение об ошибке «путь импорта не может заканчиваться расширением .tsx», например, на

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

. Я могу обойти это, пропустив расширение или используя // @ ts-ignore, но ни одно из этих решений не является оптимальным, поскольку проект будет представлять собой смесь jsx и tsx во время его рефакторинга, и я хотел бы сразу увидеть, какой тип файла используется в import.

Шаги, которые я предпринял для преобразования проекта в машинописный текст:

1. Установка машинописного текста
2. Install @ babel / preset-typcript
3. добавьте

presets: [ @babel/preset-typescript ]

к моему babel.config. js

Чтобы еще больше запутать, в одном из других приложений (не для веб-пакетов) я у меня та же самая бабель нг и я не вижу этой проблемы. Есть ли что-то очевидное, что мне не хватает? Для справки, мой babel.config в проекте с проблемой выглядит следующим образом

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'
    ]
  };
};

, а мой конфигурационный файл babel в проекте без веб-пакета выглядит следующим образом

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 для обоих проектов выглядит следующим образом

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

Моим первым инстинктом было посмотреть на модуль распознавателя модулей, но, похоже, это не имело никакого значения. Я что-то упускаю из виду?