絕對路徑不適用於使用 typescript 創建反應應用程序

Question

如果我使用配置了 typescript 的絕對路徑，它將不起作用。 在 tsconfig 文件中添加配置后，我可以通過單擊組件導航到vscode中的文件。 但項目沒有運行。 如果我的配置有任何問題，請幫助我。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["./*"]
    },
    "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"],
  "exclude": ["node_modules", "build"]
}

這是我的主要路線文件

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from '~/pages';

const AppRouter: React.FC = (props) => {
  return (
    <Routes>
      <Route path="" element={<Movie />} />
      <Route path="login" element={<Login />} />
    </Routes>
  );
};

export default AppRouter;

當我單擊組件時，它會成功轉到文件。 但是當我運行這個項目時。 它向我顯示錯誤消息

Failed to compile.

Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'
ERROR in ./src/routes/index.tsx 6:0-39
Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'

webpack compiled with 1 error
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

它像這樣工作->

...
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "pages": ["src/pages"]
    },
}

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from 'pages'; // pages instead of ~/pages working

const AppRouter: React.FC = (props) => {
  return (
    <Routes>
      <Route path="" element={<Movie />} />
      <Route path="login" element={<Login />} />
    </Routes>
  );
};

export default AppRouter;

但我不想一直這樣。 因為它會混淆。 直接模塊路徑意味着來自 node_modules 我想保留 ~/* 這意味着來自 src 文件夾

我使用了其他帶有 react-rewired-app 的項目。 但我不想這樣做。

Answer 1

您必須檢查 package.json 中是否有"type": "module" ，因為那么您需要編寫分機。 在您導入的每個文件中：

import { Login, Movie } from '~/pages.tsx';

如果是這種情況，您可以簡單地刪除"type": "module"

Answer 2

您正在使用create-react-app ，因此您必須遵循他們設置的模式。

create-react-app在他們的文檔中解釋了如何對 typescript 項目使用絕對導入。

如果您的項目看起來像這樣：

    |- project
    |- src
       |-- components
       |-- pages
            |- index.ts
            |- Login.tsx
            |- Movie.tsx

您的導入應如下所示：

    import {Login, Movie} from 'paths'