不再支持路径别名

你现在可以这样做，直接导入相对于src目录的文件

转到您的jsconfig.json文件添加基本 URL"."

"compilerOptions": {
    "baseUrl":".",
    ...

然后你可以直接从src目录中导入东西

import Myfile from "src/myfile.js"

您可能已经弄清楚了这一点，但这里有一个解决方案，我们在等待将其添加到 tsconfig的拉取请求 当前与 create-react-app react v 17.0.2 存在相同的问题，

我在 gatsby 应用程序中遇到了类似的问题，您无法在不更改 web 包配置的情况下设置别名导入

该线程对没有typescript的cra 中的别名导入有很好的解释，但最终应该会导致相同的配置。

你必须要么弹出（除非你有其他问题需要在 webpack 配置中解决，否则不要这样做。）或者使用另一个包，如CRACO或React-App-Rewired通过 webpack 配置你的别名。

这个 Stackoverflow 答案很可能是您正在寻找的。

安装react-app-rewired然后创建 config-overrides.js 并将此代码放在那里 - >

//config-overrides.js
const { alias, configPaths } = require('react-app-rewire-alias');

module.exports = function override(config) {
  return alias(configPaths('./tsconfig.paths.json'))(config);
};

在 tsconfig.paths.json 中创建你的路径对象

//tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components": ["components"],
      "@styles": ["styles"],
      "@config": ["config"]
    }
  }
}

然后在 tsconfig 内扩展这些选项（不在 compilerOptions 内）

//tsconfig.js

 "extends": "./tsconfig.paths.json"

最后，用 react-app-rewired 替换 package.json 中的每个 react-scripts 脚本

//package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

你应该准备好去追求这一切。希望这可以帮助其他任何在 create-react-app 中遇到此问题的人。

我要发安杰洛普的回答工作，通过改变config-overrides.js来

const path = require('path');

module.exports = function override(config, env) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      "@src": path.resolve(__dirname, 'src/'),
      "@api": path.resolve(__dirname, "src/API/"),
      "@assets": path.resolve(__dirname, "src/assets/"),
      "@components": path.resolve(__dirname, "src/components/"),
      "@containers": path.resolve(__dirname, "src/containers/"),
      "@css": path.resolve(__dirname, "src/css/"),
      "@customHooks": path.resolve(__dirname, "src/CustomHooks/"),
      "@helperFuncs": path.resolve(__dirname, "src/HelperFuncs/"),
      "@hoc": path.resolve(__dirname, "src/hoc/"),
      "@middlewares": path.resolve(__dirname, "src/middlewares/"),
      "@models": path.resolve(__dirname, "src/models/"),
      "@store": path.resolve(__dirname, "src/store/"),
      "@actions": path.resolve(__dirname, "src/store/actions"),
      "@reducers": path.resolve(__dirname, "src/store/reducers/"),
      "@sagas": path.resolve(__dirname, "src/store/sagas/"),
      "@typings": path.resolve(__dirname, "src/Typings/"),
      "@utils": path.resolve(__dirname, "src/utils/")
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.d.ts']
  };
  return config;
};

像魅力一样工作，但唯一缺少的是 VSCode 自动完成功能。React 启动时出现以下警告：

 The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

所以我假设它path从 tsconfig.json 中删除了该字段并且 VSCode 无法获取别名，因此ESLint并TS在 VSCode 中给出以下错误，但一切正常。

Unable to resolve path to module '@typings/...'.eslintimport/no-unresolved

Cannot find module '@typings/...' or its corresponding type declarations.ts(2307)

任何人都有解决方案？

更新

通过进行以下更改设法使其全部工作：

tsconfig.paths.json

{
  "compilerOptions": {
    "paths": {
      "@src/*": ["./src/*"],
      "@api/*": ["./src/API/*"],
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@containers/*": ["./src/containers/*"],
      "@css/*": ["./src/css/*"],
      "@customHooks/*": ["./src/CustomHooks/*"],
      "@helperFuncs/*": ["./src/HelperFuncs/*"],
      "@hoc/*": ["./src/hoc/*"],
      "@middlewares/*": ["./src/middlewares/*"],
      "@models/*": ["./src/models/*"],
      "@store/*": ["./src/store/*"],
      "@actions/*": ["./src/store/actions*"],
      "@reducers/*": ["./src/store/reducers/*"],
      "@sagas/*": ["./src/store/sagas/*"],
      "@typings/*": ["./src/Typings/*"],
      "@utils/*": ["./src/utils/*"]
    }
  }
}

注意*末尾的@.../*

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es2015.promise"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ],
    "resolveJsonModule": true,
    "baseUrl": ".",
  },
  "include": [
    "src",
    "src/**/*.ts"
  ]
}

npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

.eslintrc.json

{
    ...,
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"]
        },
        "typescript": {}
      }
    }
}

您必须添加"baseUrl": ".",编译器选项，然后才能src/your/path直接使用导入。