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

Question

我收到 TypeScript 警告，提示无法找到该模块。

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

我有这个结构示例

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

我正在尝试从我设置的

Userschema

自定义路径导入我的

models

，但它给了我一个错误

这就是我的

index.ts

中的

models

的样子

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'

Answer 1

我通过将路径别名替换为

解决了这个问题

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

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

Answer 2

如果上述任何代码对您不起作用

{
  "compilerOptions": {
     // Next.js Absolute path
    "baseUrl": ".",
    "paths": {

      // with `/*` for accessing the nested folder.
      // without `/*` for `folder/index.ts`
      
      "@components": ["src/components"],
      "@components/*": ["src/components/*"],

      "@images": ["src/images"],
      "@images/*": ["src/images/*"],

      "@fonts": ["src/fonts"],
      "@fonts/*": ["src/fonts/*"]
    }
  },

以上解决方法已在github issues中得到解答。

Answer 3

代替：

        "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:"." 为 ./ 中的所有文件夹指定了路径。现在你应该用它们的别名调用它们，我不知道为什么它会这样工作，但我也遇到了这个问题，这为我解决了它。

Answer 4

这确实让我有一段时间了。使用应用程序路由器；我的“应用程序”文件夹中有“组件”文件夹......因此我需要这样做：

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

baseUrl 是 package.json 文件所在的位置，而不是组件文件夹所在的位置。 如果您将应用程序路由器与“src”文件夹一起使用，它将是：

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

仅供未来读者注意！