在 jsconfig.json 中使用 baseUrl 不适用于 NextJS

Question

https://github.com/hutber/jsconfigerror示例 repo 显示 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

页面/index.js

import Head from 'components/AThing'

我怎样才能开始baseUrl工作nextjs

Answer 1

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

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

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

import Head from 'components/AThing';

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

希望能帮助到你。

Answer 2

next 不读取 jsconfig.json 中写的配置，你必须以 nextjs 的方式自定义 webpack config。

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

const path = require('path')

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

    return config
  }
}

Answer 3

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

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

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

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

请确保，当您导入某些内容时，不要以 开头./，例如./pages/index.js，因为您打破了绝对别名并开始以相对模式导入。

import Head from '@components/AThing'