Nextjs：导入别名在路由组中不起作用

Question

当每次使用“@”导入时，我正在尝试路由组和嵌套布局文件

module-not-found

jsconfig.json：

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

这是我遇到的错误

⨯ ./src/app/(main)/dashboard/page.js:9:1
Module not found: Can't resolve '@lib/schemas/subscriptionSchema'
   7 | import NotAccepted from "./notAccepted";
   8 |
>  9 | import Subscription from "@lib/schemas/subscriptionSchema";
     | ^
  10 | import Users from "@/lib/schemas/userSchema";
  11 | import Events from "@/lib/schemas/eventSchema";
  12 | import Stripe from "stripe";

https://nextjs.org/docs/messages/module-not-found

文件夹结构：

任何帮助将不胜感激。谢谢

Nextjs 版本 14.2.3

尝试用../../替换@/（但是很多是必要的）...它有效，但不是一个可行的选择。

Answer 1

{ “编译器选项”：{ "baseUrl": "./src", “路径”：{ “@/”：[“”]， “@组件/”：[“组件/”]， "@lib/": ["lib/"], “@app/”：[“app/”] } }

}

您遇到的错误表明 Next.js 无法解析导入路径 @lib/schemas/subscriptionSchema。此问题通常是由于 tsconfig.json 或 jsconfig.json 文件中的导入别名配置不正确而导致的。

首先，确保在 tsconfig.json 或 jsconfig.json 文件中正确配置导入别名。根据您提供的配置，您似乎正在使用 TypeScript，因此我将参考 tsconfig.json 文件。 确保将 baseUrl 正确设置为源文件的根目录，并且 paths 对象包含导入别名的正确映射。 更新 tsconfig.json 文件后，重新启动开发服务器以应用更改。如果问题仍然存在，请仔细检查 subscriptionSchema 的文件路径相对于 baseUrl 是否正确。

如果您仍然遇到问题，您可能需要验证文件 subscriptionSchema.ts 是否存在于相对于 baseUrl 的正确位置