How to setup BALKAN FamilyTreeJS in NextJS 14

I'm trying to integrate the @balkangraph/familytree.js package into my Next.js (App router, v14) project, but I'm encountering several issues with my configuration (following the docs).

Specifically, I'm running into errors related to the usage of require in next.config.js, as well as Tailwind CSS configuration issues (after following the docs guide).

I've followed the package's documentation but couldn't find any specific tutorials or examples for Next.js setups.

Here's what I've tried so far:

Next.js Configuration as per the docs:

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

const nextConfig = {};

export default withTM(nextConfig);

However, this throws an error when I attempt to run the app:

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.

Issues Encountered:

1. Require in next.config.js:

   • Initially, using require caused an error because it's not supported in ES module scope. I switched to ES6 import, but the same errors persisted.

2. Tailwind CSS issue:

   • When using Tailwind CSS, I'm encountering errors when trying to transpile the @balkangraph/familytree.js module alongside Tailwind.

Here's a screenshot of the errors I'm seeing:

• Tailwind issue:

• Here's the closest I've gotten in the installation:

Question:

Has anyone successfully set up @balkangraph/familytree.js in a Next.js project with Tailwind CSS? What specific configuration changes do I need to make to resolve the errors? Is there a better approach to handle module transpilation alongside other configurations like Tailwind in Next.js?

Any help or insights would be greatly appreciated!

There was a issue with the installation package. It is fixed now. Please try again.