Не работает расщепление кода для машинописи (реагирует на приложение)

Question

Извините за мой Engli sh.

У меня было js компонентов, с которыми хорошо работало расщепление кода. Но как только я переместил эти компоненты в машинописный текст, расщепление кода перестало работать. Я работаю с Reaction-приложением.

Как восстановить разделение кода?

Компонент Navigation.tsx (работает корректно на js)

Вот мой код- расщепление

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Loading from '../components/Loading';

const Authorization = React.lazy(() => import('../screens/Authorization'));
const Orders = React.lazy(() => import('../screens/Orders'));
const Order = React.lazy(() => import('../screens/Order'));

const Navigation = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/auth">
        <React.Suspense fallback={<Loading />}>
          <Authorization />
        </React.Suspense>
      </Route>
      <ProtectedRoute path="/">
        <Switch>
          <Route path="/orders" exact>
            <Orders />
          </Route>
          <Route path="/orders/:id">
            <Order />
          </Route>
        </Switch>
      </ProtectedRoute>
    </Switch>
  </BrowserRouter>
);

export default Navigation;

tsconfig. json

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "target": "es5",
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015.promise"
    ]
  }
}

webpack.config. js

module.exports = (env, options) => {
  const isDevMode = options.mode === 'development';
  const dist = path.join(__dirname, 'dist');
  const src = path.join(__dirname, 'src');
  const port = 8000;
  const host = 'localhost';

  return {
    stats: 'minimal',
    context: src,
    entry: './index.js',
    output: {
      path: dist,
      publicPath: `http://${host}:${port}/`,
      filename: `js/[name]${isDevMode ? '' : '.[contenthash]'}.js`,
      chunkFilename: `js/[name]${isDevMode ? '' : '.[contenthash]'}.js`,
    },
    devtool: isDevMode && 'source-map',
    devServer: {
      host,
      port,
      hot: true,
      historyApiFallback: true,
      overlay: true,
    },
    resolve: {
      modules: [src, 'node_modules'],
      extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
      new BundleAnalyzerPlugin(),
      new CleanWebpackPlugin(),
      new HtmlPlugin(...),
      new MiniCssExtractPlugin(...),
    ],
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: ['cache-loader', 'ts-loader'],
          include: src,
          exclude: /node_modules/,
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['cache-loader', 'babel-loader'],
          include: src,
        },
        ...
      ],
    },
  };
};