带有 TypesScript index.ts 文件的 NextJS 未使用路径别名解析答案

【问题标题】：NextJS with TypesScript index.ts files not being resolved with path aliases带有 TypesScript index.ts 文件的 NextJS 未使用路径别名解析
【发布时间】：2021-02-19 17:23:13
【问题描述】：

我收到一个 TypeScript 警告，提示找不到该模块。

我在我的 NextJS 应用程序上使用 TypeScript，这一次只是在我一直使用自定义路径并且之前没有遇到过这个问题时发生过。

我有这个结构的例子

/models
  |-- index.ts
  |-- User.ts
/pages
   /api
     /users
       |-- index.ts

我正在尝试从我设置的models 自定义路径导入我的Userschema，但它给了我一个错误

这就是我在models 中的index.ts 的样子

export { default as User } from './User';

这就是我在 api/user/index.ts 中导入它的方式

import { User } from '@/models';

我的tsconfig 文件如下所示

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "./components/*"
            ],
            "@/types/*": [
                "./types/*"
            ],
            "@/utils/*": [
                "./utils/*"
            ],
            "@/middlewares/*": [
                "./middlewares/*"
            ],
            "@/models/*": [
                "./models/*"
            ],
            "@/lib/*": [
                "./lib/*"
            ]
        }
    },
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ]
}

使用索引文件以外的自定义路径导入，例如 import dbConnect from '@/utils/dbConnect' 可以工作，但是对于索引文件，我仍然需要在导入时指定索引文件名才能使其工作。 import { User } from '@/models/index'

【问题讨论】：

标签： typescript next.js

【解决方案1】：

我通过将路径别名替换为

解决了这个问题

...
"baseUrl": ".",
"paths": {
    "@/*": [ "./*" ]
 }

我没有为每个文件夹指定单独的别名，而是使用了上面的别名，现在它可以正常工作了。

【讨论】：

【解决方案2】：

代替：

        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "./components/*"
            ],
            "@/types/*": [
                "./types/*"
            ],
            "@/utils/*": [
                "./utils/*"
            ],
            "@/middlewares/*": [
                "./middlewares/*"
            ],
            "@/models/*": [
                "./models/*"
            ],
            "@/lib/*": [
                "./lib/*"
            ]
        }

做：

        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "components/*"
            ],
            "@/types/*": [
                "types/*"
            ],
            "@/utils/*": [
                "utils/*"
            ],
            "@/middlewares/*": [
                "middlewares/*"
            ],
            "@/models/*": [
                "models/*"
            ],
            "@/lib/*": [
                "lib/*"
            ]
        }

这是因为您已经使用 baseUrl:"." 为 ./ 中的所有文件夹指定了路径。 na 现在你应该用它们的别名调用它们，我不知道为什么会这样，但我也遇到了这个问题，这为我解决了。

【讨论】：