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

【问题标题】：Importing using absolute path in NextJs not working在 NextJs 中使用绝对路径导入不起作用
【发布时间】：2021-01-31 10:54:14
【问题描述】：

我在路由中创建了一个名为 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)

【问题讨论】：

我可以知道您的文件夹结构吗？我想您可以尝试将src/components/common/AppHeader 替换为components/common/AppHeader
我更新了我的问题。我试过你提到的，说没有安装模块。我还想使用绝对路径访问 lib 中的内容。
我最终只使用了 webpack 解决方案：stackoverflow.com/a/59542342/1009698config.resolve.modules.push(path.resolve('./'))
这能回答你的问题吗？ Using baseUrl in jsconfig.json not working with NextJS

标签： node.js next.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用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"
  ]
}

【讨论】：

【解决方案3】：

您的文件夹结构似乎是：

root->src->组件

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

{

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

}

【讨论】：

【解决方案4】：

删除src文件夹，直接将组件放到你的源码文件夹中，然后在jsconfig.json中进行以下操作：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：