ReactJS - 在 jsconfig.json 中指定 "paths"时找不到模块

Question

考虑 jsconfig.json 中的以下设置

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components/*": ["src/components/*"],
            "@constants/*": ["src/constants/*"]
        }
    }
}

当我尝试通过以下方式在组件中导入 app-constants.js 文件时:

import AppConstants from "@constants/app-constants";

我似乎收到以下错误:

Module not found: Can't resolve '@constants/app-constants'

我的 app-constants.js 文件直接位于 src/constants 文件夹中:

知道为什么会发生这种情况吗？

编辑

我尝试使用这个:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

并且在直接调用 constants/app-constants.js

等文件夹时有效

但是当我尝试第一种方法时却没有。

如果有人能够启发我纠正我的错误，那就太好了。

Answer 1

您的代码看起来不错，您可以通过intellisense验证它，例如:

import AppConstants from "@constants/";

它将在intellisense中显示app-constants。

现在的问题是 react 尚不支持别名，但很快就会支持。

I don't know if we will add support for aliases anytime soon. I personally don't have time to work on it right now. I think the current options with setting the baseUrl to . or src is sufficient for tackling the struggles with relative imports. Beyond that it's just personal preference like using @ instead of src as prefix.

https://github.com/facebook/create-react-app/issues/7795