Файл .tsx не может разрешить другой файл .ts - PullRequest
Новая
       10

Файл .tsx не может разрешить другой файл .ts

0 голосов
/ 25 апреля 2020

Я пишу проект реакции на машинопись и написал несколько маршрутизаторов в папке src/router, а в файле src/App.tsx я пытался импортировать маршрутизатор, но он всегда говорил мне, что не может разрешить file 

// src/router/index.ts

import MainView from './MainView';
import RightView from './RightView';

const FUNCTION_ROUTES = new Set([
  '/',
  '/group_chat/:group_id',
  '/private_chat/:user_id',
  '/setting',
]);

export { MainView, RightView, FUNCTION_ROUTES };

// src/App.tsx

import React from 'react';
import { hot } from 'react-hot-loader/root';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import loadable from '@loadable/component';

import { MainView, RightView, FUNCTION_ROUTES } from './router';

function App() {
  return (
    <BrowserRouter>
      <div className="layout-wrapper">
        <Switch>
          <Route path="/signup" exact component={loadable(() => import('./containers/SignUp'))} />
          <Route path="/login" exact component={loadable(() => import('./containers/Login'))} />
          <Route exact path={[...FUNCTION_ROUTES]}>
            <Route path={[...FUNCTION_ROUTES]} exact component={MainView} />
            <Route path={[...FUNCTION_ROUTES]} exact component={RightView} />
          </Route>
          <Route component={loadable(() => import('./containers/404'))} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default hot(App);

Я проверил, что путь к файлу index.ts правильный, но когда я пытался запустить проект, он всегда говорил мне, что 

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve './router' in '/home/yeoman/projects/Graduation P
roject/WebIM/src'

Так что не так с моим App.tsx файлом и как я могу правильно импортировать маршрутизаторы.

Вот мой tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "jsx": "react",
    "isolatedModules": true,

    /* Strict Type-Checking Options */
    "strict": true,

    /* Additional Checks */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": "./",
    "paths": {
        "@/*": ["./*"],
    },

    /* Experimental Options */
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    /* Advanced Options */
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,

    "target": "ES2019",
    "module": "ESNext"
  }
}
...