FS issue on Services detail pages

[namniak]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

There's an error when navigating to Service detail pages

error - ../node_modules/@asyncapi/parser/esm/from.js:10:0
Module not found: Can't resolve 'fs'

Steps to reproduce

Run

• npx @eventcatalog/create-eventcatalog@latest my-catalog
• cd my-catalog && npm run dev

go to http://localhost:3000/services/ and click one of the services or deeplink directly to http://localhost:3000/services/Data%20Lake/

Expected behavior

Service detail pages should show correctly similarly to events detail pages

Actual behavior

Your environment

• EventCatalog version used: latest
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 115 Node v16.15.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 13.5

[gregtyler]

I ran into the same thing, which seems to be caused by dependencies requiring the Node module fs, which isn't available in the browser. @asyncapi/react-component is one of those and they discuss a similar issue (http not fs) here. Based on a StackOverflow answer I'm now patching EventCatalog's next.config.js to include extra config for Webpack:

webpack(config) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: false,
  };
  return config;
},

This works for me, but I'm not familiar enough with Next.JS to know what the trade-offs are and there's likely a better solution.

[namniak]

Currently, we are patching internal .eventcatalog-core package.json from the main eventcatalog as it overwrites .eventcatalog-core every time npm run dev is executed.

Root eventcatalog package.json

"scripts": {
  "dev": "(sleep 5 && npm run patch:core) & eventcatalog dev",
  ...
  "patch:core": "cd .eventcatalog-core && npm pkg set 'browser'='{\"fs\":false,\"path\":false,\"os\":false}' --json"
}

Not sure if there's a better solution but it seems to work for now until https://github.com/boyney123/eventcatalog/pull/431 is merged

[boyney123]

Thanks for the patience , this is now fixed thanks to #431, I have also locked down the AsyncAPI react component (Which broke things), we can update that in future releases.

@eventcatalog/core version 1.0.2 is now out.

Try again, reopen the issue if we still have issues.

Thanks!