Cannot use in TypeScript 5.0 project

[kernwig]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Description

EventCatalog-core has multiple tanspilation problems when used with TypeScript 5.0. My entire mono-repo is stuck on the outdated TypeScript v4.9 due to this.

./components/Mdx/NodeGraph/GraphLayout.ts:85:13
Type error: Operator '<=' cannot be applied to types 'Width<string | number>' and 'number'.

  83 |       // This is due to an issue with ReactFlow giving errors when we set the width in the styles.
  84 |       if (element.style.width) {
> 85 |         if (element.style.width <= nodeDefaultWidth) {
     |             ^
  86 |           element.style.width = undefined;
  87 |         }
  88 |       }

When I resolve the above (by wrapping element.style.width in Number(), then this error appears next:

info  - Creating an optimized production build  
Failed to compile.

TypeError: Cannot read properties of undefined (reading '700')
    at Object.module.exports [as typography] (<monorepo-path>/schema/.eventcatalog-core/node_modules/@tailwindcss/typography/src/styles.js:16:65)
    at <monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/util/resolveConfig.js:182:62
    at Array.reduce (<anonymous>)
    at resolveFunctionKeys (<monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/util/resolveConfig.js:181:32)
    at resolveConfig (<monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/util/resolveConfig.js:248:16)
    at resolveConfig (<monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/public/resolve-config.js:20:39)
    at getTailwindConfig (<monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:88)
    at <monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92
    at <monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
    at plugins (<monorepo-path>/schema/.eventcatalog-core/node_modules/tailwindcss/lib/plugin.js:38:69)

Import trace for requested module:
./components/Mdx/SchemaViewer/SchemaViewer.module.css
./components/Mdx/SchemaViewer/SchemaViewer.tsx

Steps to reproduce

Include EventCatalog in a project using TypeScript v5.0.4. and eventcatalog build

Expected behavior

Builds and runs properly with TypeScript v5.

Actual behavior

Will not compile.

Your environment

• EventCatalog version used: 0.6.12
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node 16.16.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS

[kernwig]

🤔 The second error is unrelated. That one appears to be related to upgrading to SST v2, which I used to deploy the catalog to AWS.

May be due to SST v2 depending on React v18, while EventCatalog depends on React v17.

[kernwig]

Workaround: Run this as an npm "postinstall" script:

"use strict";
console.log("\n** Patching EventCatalog to work with TypeScript v5 **\n\n");

const files = [
  ".eventcatalog-core/components/Mdx/NodeGraph/GraphLayout.ts",
  "../node_modules/@eventcatalog/core/components/Mdx/NodeGraph/GraphLayout.ts",
];
const origContent = "if (element.style.width <= nodeDefaultWidth) {";
const newContent = "if (Number(element.style.width) <= nodeDefaultWidth) {";

const fs = require("node:fs");

for (const filePath of files) {
  if (fs.existsSync(filePath)) {
    const fileContent = fs.readFileSync(filePath).toString();
    fs.writeFileSync(filePath, fileContent.replace(origContent, newContent));
  }
}

[pebbz]

Thanks for the work around. I've created a PR here. https://github.com/boyney123/eventcatalog/pull/414

[RamonBalthazar]

Hi @pebbz and @kernwig, what's the latest on this issue?

[pebbz]

@boyney123 Any chance this PR can be approved?

[boyney123]

Sorry folks, just catching up now, thank you @pebbz (again!), this has been merged. Enjoy!