如何在 NextJS 14 中设置 BALKAN FamilyTreeJS

Question

我正在尝试将

@balkangraph/familytree.js

包集成到我的 Next.js（应用程序路由器，v14）项目中，但我的配置遇到了几个问题（按照文档）。

具体来说，我遇到了与

require

中

next.config.js

的使用相关的错误，以及 Tailwind CSS 配置问题（在遵循文档指南之后）。

我已遵循该包的文档，但找不到 Next.js 设置的任何特定教程或示例。

这是我迄今为止尝试过的：

Next.js 根据文档进行配置：

/** @type {import('next').NextConfig} */
import nextTranspileModules from "next-transpile-modules";
const withTM = nextTranspileModules(["@balkangraph/familytree.js"]);

const nextConfig = {};

export default withTM(nextConfig);

但是，当我尝试运行该应用程序时，这会引发错误：

Error: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

遇到的问题：

1. 需要

   next.config.js

   ：
   • 最初，使用

     require

     会导致错误，因为 ES 模块范围不支持它。我切换到 ES6

     import

     ，但同样的错误仍然存在。

2. Tailwind CSS 问题：

   • 使用 Tailwind CSS 时，我在尝试与 Tailwind 一起转译

     @balkangraph/familytree.js

     模块时遇到错误。

这是我看到的错误的屏幕截图：

• 顺风问题：

• 这是我在安装中得到的最接近的结果：

问题：

有人在 Next.js 项目中使用 Tailwind CSS 成功设置了

@balkangraph/familytree.js

吗？我需要进行哪些具体配置更改才能解决这些错误？是否有更好的方法来处理模块转译以及 Next.js 中的 Tailwind 等其他配置？

任何帮助或见解将不胜感激！

Answer 1

安装包有问题。现在已经修复了。请再试一次。