在 NextJs 中使用绝对路径导入不起作用

Question

我在我的路由中创建了一个名为 jsconfig.json 的文件：

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

我有最新的nextjs"next": "latest"

目前要导入组件，我必须执行以下操作：

import AppHeader from "../../../../components/common/AppHeader";

然而，通过上面的这些更改，我想我可以这样做：

import AppHeader from "src/components/common/AppHeader";

但我收到这样的消息：

找不到模块：无法解析“src/components/common/AppHeader”

目录结构：

/
-->lib
-->src
   -->components
-->public

有任何想法吗？我也尝试将其添加到我的 next.config.js 文件中，但也没有什么区别： config.resolve.modules.push(__dirname)

Answer 1

看来你的文件夹结构是：

根->src->组件

jsconfig在您的文件中添加另一个属性

{

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

}

Answer 2

尝试使用我的 tsconfig.json，它对我有用：

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "resolveJsonModule": true
  }
}

如果您在生产模式下运行脚本，它也可能是运行脚本的原因在我的情况下，我使用：

"build": "nest build"
"start:prod": "node dist/src/main"