Question

https://github.com/hutber/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与nextjs一起使用

Answer 1

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

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

接下来要做的就是导入组件，如下所示：

import Head from 'components/AThing';

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

希望有帮助。

Answer 2

在根文件夹上创建jsconfig.json并将其写为：

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

然后“ npm run dev”或“ yarn dev”

如果在定义新路径时正在运行“下一个开发者”，请确保重新启动“下一个开发者”。

Answer 3

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

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

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

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

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

import Head from '@components/AThing'

Answer 4

jsconfig.json文件专门供vscode识别并提供诸如智能感知的功能。这里的错误基本上是因为您试图通过绝对路径而不是相对路径进行访问。

您可以使用import Head from '../components/head'

或者，如果您喜欢绝对路径，则可以结帐webpack alias。

Answer 5

下一步不读取jsconfig.json中编写的配置，您必须以nextjs方式自定义webpack配置。

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

List<Serials> serials = new List<Serials>
        {
            new Serials { Id = 1, Qty = 30, SRNo = "SR-001" },
            new Serials { Id = 2, Qty = 70, SRNo = "SR-002" }
        };

int QtyToBeIssued = 50;


foreach (var item in serials)
{
     int ToBeIssued = 0;
     if (QtyToBeIssued > 0)
     {
         var temp = item.Qty - QtyToBeIssued < 0 ? 0 : item.Qty - QtyToBeIssued;
         QtyToBeIssued -= item.Qty;
         item.Qty = temp;
     }
}

Answer 6

试试：

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

在jsconfig.json中使用baseUrl无法与NextJS一起使用

pages / index.js

6 个答案: