feat: attempt to get this component node free

[kennethaasan]

Description

Please see #956 and asyncapi/parser-js#1092. I've been able to work around this issue by setting some Webpack fallbacks in the Next.js config like this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // The config below is needed because the AsyncAPI React component needs fs, but it doesn't really use it.
  // https://github.com/asyncapi/asyncapi-react/issues/956
  webpack: (webpackConfig) => {
    webpackConfig.resolve.fallback = { fs: false };
    return webpackConfig;
  },
};

export default nextConfig;

But this doesn't work with Next.js turbopack enabled, so I got a bit annoyed, and this is an attempt to fix that this component requires Node.js modules.

Related issue(s)

[sonarqubecloud]

Quality Gate failed

Failed conditions
B Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[kennethaasan]

I gave up solving this, but I found a workaround for the Next.js config with turbopack enabled:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // The config below is needed because the AsyncAPI React component needs fs, but it doesn't really use it.
  // https://github.com/asyncapi/asyncapi-react/issues/956
  webpack: (webpackConfig) => {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    webpackConfig.resolve.fallback = { fs: false };
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return webpackConfig;
  },
  experimental: {
    turbo: {
      // https://nextjs.org/docs/app/api-reference/config/next-config-js/turbo#resolving-aliases
      resolveAlias: {
        fs: {
          browser: "./mocks/empty.mjs",
        },
      },
    },
  },
};

export default nextConfig;