在 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

。

tsconfig.json

  "module": "CommonJS",
  "baseUrl": ".",
  "paths": {
    "@/layouts/*": ["src/layouts/*"],
    "@/components/*": ["src/components/*"],
    "@/public/*": ["./public/*"]
  }

Answer 3

尝试使用我的 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"

Answer 4

在 jsconfig.json 中执行以下操作：

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

现在您可以像这样访问您的文件夹：

src/components/..
src/lib/..

Answer 5

使用

npm install --save-dev typescript @types/react

命令安装@types。

您的 tsconfig.json 文件应该是这样的：

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "paths": {
      "@/components/*": [
        "components/*"
      ],
      "@/public/*": [
        "public/*"
      ]
    },
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "."
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 6

你的配置对我有用。只需停止并重新启动 nextJs 服务器即可。