Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/maxGraph/maxGraph/discussions/462 below:

How to use maxgraph directly in a web page · maxGraph/maxGraph · Discussion #462 · GitHub

Hi @bochatay ,
As mentioned by @reuse-ay, you should remove the "type" directive, but the error is not coming from that.

I have reproduced your error.

Firefox 126.0.1 (French language)

Uncaught TypeError: Le spécificateur « @maxgraph/core » était un spécificateur simple, mais n’a pas été remappé.
Les spécificateurs relatifs de modules doivent commencer par « ./ », « ../ » ou « / ».

Chrome 126.0.6478.55
Uncaught TypeError: Failed to resolve module specifier "@maxgraph/core". Relative references must start with either "/", "./", or "../".

Imports using "@maxgraph/core" are intended to be interpreted by bundlers, TypeScript, .... but don't work in the browser, which requires relative references (see the Chrome error) or absolute references.

The maxGraph npm package is intended to be used with a package manager and bundlers which will bundle maxGraph with the rest of your application (as explicitly states in the README).
The package doesn't provide a bundle for direct use in a browser (this has been removed in version 0.5.0, see #266) and there is no plan to change this AFAIK (but based on feedback, I guess that this could change).
So, for the time being, any solution that allows maxGraph to be used directly in a web page is a hack. Is there any reason why you can't integrate maxGraph into an application?

That being said, I have tried to directly import the package entry point directly in the page. It is a ES module so it could be possible to load it.
This entry point (dist/index.js in the npm package) imports all maxGraph modules (classes, functions, constants, ...), so the browser should be theoretically able to load the whole maxGraph code.
Be aware that such a solution is very ineffective, as the browser is going to load a lot of files, and the files are not minified. So don't use it in production.

In the page, I changed the import directive like this:

// use jsdelivr
import {Graph, InternalEvent} from 'https://cdn.jsdelivr.net/npm/@maxgraph/core@0.11.0/dist/index.js';
// or locally if the page is in the same folder as the 'node_modules' folder
// import {Graph, InternalEvent} from './node_modules/@maxgraph/core/dist/index.js';

The dist/index.js file imports elements without extension, so the browser tries to load https://cdn.jsdelivr.net/npm/@maxgraph/core@0.11.0/dist/view/mixins/ConnectionsMixin instead. And so, it fails to load the resources.

I finally found a workaround by locally patching the js files to ensure that all imports use the js extension to match the path of the file.
I have attached the solution in this zip (the content must be served by a web server, as the script type is "module" in the HTML page):
maxgraph_discussion_462_shared_archives_01.zip

The JavaScript code is the same as in the README of the maxGraph repo (after adaptation from TypeScript).

Here is what I then see in the browser 👇🏿

Mini how-to patch the npm package

• Get the url the npm package (omit the version to get the latest): $ npm view @maxgraph/core@0.11.0 dist.tarball
  --> https://registry.npmjs.org/@maxgraph/core/-/core-0.11.0.tgz
• Use the url to get the tgz
• Patch the file. I used https://github.com/beenotung/fix-esm-import-path: npx fix-esm-import-path ./node_modules/@maxgraph/core/dist
• Some files must be manually patched: they reference a folder instead of the index.js file that they contain. For example, in index.js replace export * from './editor'; by export * from './editor/index.js';.
• Other imports to manually patch
  • index.js: from './serialization/codecs' to './serialization/codecs/index.js'
  • serialization/register.js: from './codecs' to './codecs/index.js'

This may be fixed in the future as it impacts some webpack configuration. For example, see https://github.com/maxGraph/maxGraph/blob/v0.11.0/packages/js-example/webpack.config.js#L21-L30.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4