Running maxgraph headlessly #761

Antony74 · 2025-04-11T20:38:40Z

Antony74
Apr 11, 2025

Anyone had any luck running maxgraph headlessly in nodejs, i.e. without a browser? A quick look at the source code reveals it's dependent upon DOM, but often that's easily sorted by installing jsdom. But actually the problem's more fundemental than that:

C:\git\evolution-of-fantasy>node
Welcome to Node.js v20.11.0.
Type ".help" for more information.
> const {Graph} = require('@maxgraph/core');
Uncaught:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in C:\git\evolution-of-fantasy\node_modules\@maxgraph\core\package.json
    at exportsNotFound (node:internal/modules/esm/resolve:303:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:593:13)
    at resolveExports (node:internal/modules/cjs/loader:591:36)
    at Module._findPath (node:internal/modules/cjs/loader:668:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

This should be easy, because maxgraph has unit tests, and as such already runs correctly within the nodejs environment, but I'm scratching my head here not able to figure out how to use it.

I'm thrilled to be using maxgraph, because I quite often find myself working with graph data that I'd like to visualise, and it seems like a huge upgrade from graphviz, and TypeScript native too, so I'm really excited about it. It'd just be nice to run a program and have it document itself without having to rely on a browser. (The SVG export part is easy too, even if my current implementation is a bit knarly).

Answered by tbouffard

May 16, 2025

Hi @Antony74 https://github.com/maxGraph/maxGraph/releases/tag/v0.20.0 is available and provides CommonJS support.

View full answer

tbouffard · 2025-04-11T21:37:16Z

tbouffard
Apr 11, 2025
Maintainer

Hi
As far as I understand, you are trying to load maxGraph with CommonJS modules.

const {Graph} = require('@maxgraph/core');

maxGraph only provides ECMAScript modules, so this is what explains the error you see.
Node doesn't find CommonJS modules for maxGraph. It says that it doesn't find a "main" attribute in the package.json file which is one of the way to declare where to find the CommonJS modules of a npm package (maxGraph doesn't include such an attribute).

As you mentioned, the tests runs with jsdom and they all use the « import » syntax to load maxGraph elements.
Your node script should do the same to use ES modules.

import {Graph} from '@maxgraph/core';

0 replies

Antony74 · 2025-04-12T20:03:29Z

Antony74
Apr 12, 2025
Author

Wow, you've nailed the problem, thank you so much for your advice!

Unfortunately the solution doesn't follow as an exercise for the reader quite as easily as either of us would expect or like.

Setting up a nodejs TypeScript project with ESM is a little more ticklish than I'd anticipated. Having gotten that far, I find it breaks when I try to bring in maxgraph:

C:\git\ts-hello-maxgraph-esm>npm start

> ts-hello-maxgraph-esm@1.0.0 start
> tsc && node dist/index.js

node:internal/modules/esm/resolve:275
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\git\ts-hello-maxgraph-esm\node_modules\@maxgraph\core\lib\view\mixins\_graph-mixins-types' imported from C:\git\ts-hello-maxgraph-esm\node_modules\@maxgraph\core\lib\index.js
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:617:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:273:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:135:49) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///C:/git/ts-hello-maxgraph-esm/node_modules/@maxgraph/core/lib/view/mixins/_graph-mixins-types'
}

Node.js v22.14.0

The code I'm running can be found in this example repo

It looks like ESM requires the file extension to be given for imports? Which maxgraph doesn't do. Build tools like Vite, and apparently unit test tools like Jest, allow this requirement to be waived, but nodejs does not. I'm still trying to think of a way to work around this, and would welcome your input, if possible.

12 replies

Antony74 May 3, 2025
Author

maxgraph-core-commonjs published

tbouffard May 9, 2025
Maintainer

Hi @Antony74
thanks for sharing your project. In addition to the commonjs flavor, it contains interesting things about the SVG export.

On my side, I am considering to provide commonjs modules in the npm package of maxgraph in a near future: some user seems to have issue to use jest out of the box, see #790, so this is a 2nd use case in addition to yours.

See #824

Antony74 May 9, 2025
Author

Hi @tbouffard

I'm thrilled you've found my project interesting, and food-for-thought on a couple of fronts.

I am happy to cooperate with any efforts to make my package obsolete.

tbouffard May 16, 2025
Maintainer

Hi @Antony74 https://github.com/maxGraph/maxGraph/releases/tag/v0.20.0 is available and provides CommonJS support.

Answer selected by Antony74

Antony74 May 18, 2025
Author

Hi @tbouffard

That works great, wow, thank you very much!

In addition to the commonjs flavor, [maxgraph-core-commonjs] contains interesting things about the SVG export.

Which is a little bit of a conundrum. The ability to inline images, specifically. I can't find an npm package which provides that functionality, so I think I'm going in improve it, take inspiration from the SimpleSvgExporter example you've provided, and publish something as a generic tool for working with SVG.

tbouffard May 23, 2025
Maintainer

Yes that's a great idea.

The SimpleSvgExporter I provided in the node example is something that will be provided out of the box by maxGraph in the future (I guess/hope 😄). This has been discussed several times in the past:

In the current implementation, I didn't implement the inline image you proposed as it requires backend dependencies and maxGraph mainly targets browsers. But, having such a feature as a maxGraph extension for backend usage will be great.

Antony74 May 23, 2025
Author

Thanks @tbouffard, that's helpful.

I used your example export code to improve my own here, thanks.

I have gotten rid of the backend dependency in favor of dependency injection, and plan on publishing my new package (and deprecating my old package) once I've got some documentation and tests written.

Antony74 May 25, 2025
Author

Done

maxgraph-core-commonjs should no longer be needed, as @maxgraph/core from version 0.20.0 supports CommonJS out of the box.

The additional support for creating portable .svg files can now be found in my new package svg-inline-images

Thank you

Running maxgraph headlessly #761

Uh oh!

Antony74 Apr 11, 2025

Replies: 2 comments · 12 replies

Uh oh!

Uh oh!

tbouffard Apr 11, 2025 Maintainer

Uh oh!

Antony74 Apr 12, 2025 Author

Uh oh!

Antony74 May 3, 2025 Author

Uh oh!

Uh oh!

tbouffard May 9, 2025 Maintainer

Uh oh!

Antony74 May 9, 2025 Author

Uh oh!

tbouffard May 16, 2025 Maintainer

Uh oh!

Uh oh!

Antony74 May 18, 2025 Author

Uh oh!

tbouffard May 23, 2025 Maintainer

Uh oh!

Antony74 May 23, 2025 Author

Uh oh!

Antony74 May 25, 2025 Author

Antony74
Apr 11, 2025

Replies: 2 comments 12 replies

tbouffard
Apr 11, 2025
Maintainer

Antony74
Apr 12, 2025
Author

Antony74 May 3, 2025
Author

tbouffard May 9, 2025
Maintainer

Antony74 May 9, 2025
Author

tbouffard May 16, 2025
Maintainer

Antony74 May 18, 2025
Author

tbouffard May 23, 2025
Maintainer

Antony74 May 23, 2025
Author

Antony74 May 25, 2025
Author