在 jsconfig.json 中使用 baseUrl 不适用于 Next.js

Question

jsconfigerror 是显示 jsconfig 不工作的示例存储库。

我的 jsconig.json 文件中有以下设置：

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

但是，当我进行导入时，它失败了：

./pages/index.js
Module not found: Can't resolve 'components/AThing' in '/var/www/gd.hutuber.com/pages'

文件夹结构

¬ components
   ¬ AThing
¬ pages
   ¬ index.js

pages/index.js

import Head from 'components/AThing'

如何让 baseUrl 与 Next.js 一起工作？

Answer 1

由于Next.js 9.4，Next.js自动支持tsconfig.json和jsconfig.json“路径”和“baseUrl”选项。

在 official documentation 阅读更多内容。

对于之前的版本，Next.js 不会读取文件 jsconfig.json 中写入的配置。您必须以 Next.js 方式自定义 Webpack 配置。

在项目的根目录中文件 package.json 旁边创建一个名为 next.config.js 的文件。然后重启。

const path = require('path')

module.exports = {
  webpack: config => {
    config.resolve.modules.push(path.resolve('./'))

    return config
  }
}

Answer 2

从 Next.js 9.4 开始，您可以轻松地在项目的根目录中创建 jsconfig.json 或 *tsconfig.json 文件，然后只需输入以下内容：

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

接下来您必须做的是导入您的组件，如下所示：

import Head from 'components/AThing';

假设组件文件夹也放在项目的根目录中。

Answer 3

在根文件夹中创建文件 jsconfig.json 并添加：

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

然后“npm 运行 dev”或“yarn dev”。

如果在定义新路径时有'next dev' 运行ning，请确保重新启动'next dev'。

Answer 4

尝试：

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Answer 5

开始之前，您应该检查您的 Next.js 版本是否至少为 9.4。

当您配置 jsconfig.json 时，您应该终止进程并重新启动。

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

虽然 baseUrl 很有用并且在大多数情况下都足够了，但您可以使用前缀 @ 来明确这是一个别名文件夹。

请确保，当您导入某些内容时，您不会像 ./pages/index.js 那样以 ./ 开头，因为您正在打破绝对别名并开始以相对模式导入。

import Head from '@components/AThing'

Answer 6

只是为了澄清这里的片段。 Next.js.

的所有现代迭代都支持 JSconfig 和绝对路径

创建配置文件：
```
jsconfig.json
```

指定你的基地URL:

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

像这样更改导入：
```
import 'components/header'
```

在 jsconfig.json 中使用 baseUrl 不适用于 Next.js

Using baseUrl in jsconfig.json is not working with Next.js

javascript

next.js

pages/index.js