带有 React 的打字稿，找不到导入

Question

i'm trying to import using modules, but i dont know what i'm doing wrong, can anyone help me?

the app is here:

https://codesandbox.io/s/vigilant-sea-3q8v08

if i try to enter in MainLayout, i can enter with ctrl+leftclick, but with npm start, this erro shows:

Could not find dependency: 'layouts' relative to '/src/App.tsx'

this work: import { MainLayout } from "./components/layouts";

but i want: import { MainLayout } from "layouts";

my app

import React from "react";
import "./App.css";
import { Routes, Route, Link } from "react-router-dom";
import { MainLayout } from "layouts";

function App() {
  return (
    <Routes>
      <Route path="/" element={<MainLayout />}>
        <Route path="/" element={<h1>project with Api</h1>} />
        <Route path="about" element={<h1>test</h1>} />
      </Route>
    </Routes>
  );
}

export default App;

Answer 1

Add baseUrl and remove "./src"s in your tsconfig file.

.
.
    "baseUrl": ".",
    "paths": {
      "components": [
        "./components"
      ],
      "layouts": [
        "./components/layouts"
      ],
.
.

path usage