compilerOptions.paths 不得设置（不支持别名导入）

Posted 2023-03-07

【中文标题】compilerOptions.paths 不得设置（不支持别名导入）

【英文标题】：compilerOptions.paths must not be set (alias imports are not supported)

【发布时间】：2021-01-18 05:05:15

【问题描述】：

我正在尝试在 tsconfig.json 中映射路径以摆脱 相对路径 地狱。我的 React 应用基于 Create-React-App。 我尝试了这个SO thread 并在我的 tsconfig.json 中添加了路径。我的 tsconfig.json 是

  "compilerOptions": 
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "strictNullChecks": false
  ,
  "include": [
    "src"
  ]

当我在 VS Code 中编译我的项目时，它会从 tsconfig.json 中删除路径条目，并显示以下消息。为什么我的基于 react-scripts 的 React 项目不支持别名导入？

【问题讨论】：

你找到解决办法了吗？

不，还没有......

使用相对路径有什么问题？

如果你曾经在 Angular 中使用过这个功能，你就不会问这个问题 :)

@RB19 这是一个答案***.com/a/68778994/14487032

【参考方案1】：

不再支持路径别名

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

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

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

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

import Myfile from "src/myfile.js"

【讨论】：

不再支持路径别名的信息从何而来？我没有自发发现任何东西。

React 启动时。 - compilerOptions.paths must not be set (aliased imports are not supported) 但是有一个workaround

求助：Error: Your project's 'baseUrl' can only be set to 'src' or 'node_modules'. Create React App does not support other values at this time.

【参考方案2】：

您可能已经想到了这个，但在我们等待pull request that adds this to tsconfig 时，这里有一个解决方案 目前与 create-react-app react v 17.0.2 有同样的问题，

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

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

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

This *** answer 很可能是您要查找的内容。

安装 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"

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

//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。查看我的answer。

糟糕，非常感谢?

【参考方案3】：

我通过将config-overrides.js 更改为来使Angelo P's 回答工作

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)

所以我假设它从 tsconfig.json 中删除了 path 字段，并且 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": 
      
    

【参考方案4】：

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

【参考方案5】：

您不再需要craco 来解决此类问题。我通过将baseUrl 移动到主tsconfig.json 文件解决了这个问题，如下所示：

tsconfig:

    "extends": "./tsconfig.paths.json",
    "compilerOptions": 
        "baseUrl": "./src",
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": false,
        "noImplicitAny": false,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react"
    ,
    "include": ["src"]

tsconfig.path.json:

    "compilerOptions": 
        "paths": 
            "api/*": ["api/*"],
            "assets/*": ["assets/*"],
            "config/*": ["config/*"],
            "components/*": ["components/*"],
            "hooks/*": ["hooks/*"],
            "pages/*": ["pages/*"],
            "store/*": ["store/*"],
            "constant/*": ["constant/*"],
            "types/*": ["types/*"],
            "utils/*": ["utils/*"]