Latest build broken? ERROR in ./node_modules/graphology/dist/graphology.mjs 2:0-44

[getnashty]

Describe the bug

I just installed reagraph in my project - version 4.11.1.. I tried the example in the readme:

import React from 'react';
import { GraphCanvas } from 'reagraph';

export default () => (
  <GraphCanvas
    nodes={[
      {
        id: 'n-1',
        label: '1'
      },
      {
        id: 'n-2',
        label: '2'
      }
    ]}
    edges={[
      {
        id: '1->2',
        source: 'n-1',
        target: 'n-2',
        label: 'Edge 1-2'
      }
    ]}
  />
);

And it kills the react client.. lots of errors like this:

(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.```

### Steps to Reproduce the Bug or Issue

Try a fresh install with version 4.11.1?

### Expected behavior

I expected it to work

### Screenshots or Videos

_No response_

### Platform

- Reagraph Version: 4.11.1
- OS: macOS
- Browser:  Chrome
- NodeJS version: 16.9.1
- React: 18.2.0

### Your Example Website or App

_No response_

### Additional context

_No response_

[amcdnl]

Can you provide more details like what build system you are using?

[getnashty]

maybe I'm misunderstanding, but I believe its just create-react-app's default build system

[getnashty]

https://codesandbox.io/s/reagraph-example-forked-8flnt8?file=/src/App.tsx I forked the example sandbox code and updated the package to 4.11.1 and it also got an error..

[v3g42]

I was able to solve this by specifying the following in package.json

"resolutions": {
    "graphology": "0.25.4"
  }

Reference to the thread https://github.com/graphology/graphology/issues/489#issuecomment-1660092981

[tunahfishy]

The latest build is also breaking for me:

Error: Cannot find module '~/node_modules/graphology-layout/circular' imported from ~/node_modules/reagraph/dist/index.js
Did you mean to import graphology-layout/circular.js?

[amcdnl]

Give 4.12.1 a shot please

[tunahfishy]

i get the same error

---

From: Austin @.> Sent: Monday, August 14, 2023 7:23 AM To: reaviz/reagraph @.> Cc: Tinah Hong @.>; Comment @.> Subject: Re: [reaviz/reagraph] Latest build broken? ERROR in ./node_modules/graphology/dist/graphology.mjs 2:0-44 (Issue #115)

Give 4.12.1 a shot please

— Reply to this email directly, view it on GitHubhttps://github.com/reaviz/reagraph/issues/115#issuecomment-1677221360, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AO325YGKPY47RNMN4ZBT6VLXVIKFZANCNFSM6AAAAAA25VHI7I. You are receiving this because you commented.Message ID: @.***>

[theotanase]

I also got the same error.

Node.js 18.16.1 react-scripts: 5.0.1 react: 18.2.0 reagraph: 4.13.0

ERROR in ./node_modules/reagraph/dist/index.js 20:0-50
Module not found: Error: Can't resolve 'graphology-layout/circular' in '....../node_modules/reagraph/dist'
Did you mean 'circular.js'?
BREAKING CHANGE: The request 'graphology-layout/circular' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[amcdnl]

i think this should be fixed now.

[hverlin]

@amcdnl I am still getting an error. I think 3 imports need to be fixed:

import random from "graphology-layout/random.js";
import pagerank from "graphology-metrics/centrality/pagerank.js";
import { degreeCentrality } from "graphology-metrics/centrality/degree.js";

https://github.com/search?q=repo%3Areaviz%2Freagraph+%22from+%27graphology-%22&type=code

[amcdnl]

@hverlin - Could you raise a PR for that? I can merge and release it after.

[hverlin]

@amcdnl I think this should do it: https://github.com/reaviz/reagraph/pull/135

While waiting for this I used the following workaround with a pnpm patch (using pnpm patch reagraph@4.14.0)

package.json

"pnpm": {
    "patchedDependencies": {
      "reagraph@4.14.0": "patches/reagraph@4.14.0.patch"
    }
  }

patches/reagraph@4.14.0.patch

diff --git a/dist/index.js b/dist/index.js
index c44f8558a963fb3516b8f92502fec6509d6f03cf..366022d436d6a4e02ee26b1b7efa3dfb83299115 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -19,9 +19,9 @@ import { treemap, hierarchy, stratify, tree } from "d3-hierarchy";
 import circular from "graphology-layout/circular.js";
 import noverlapLayout from "graphology-layout-noverlap";
 import forceAtlas2Layout from "graphology-layout-forceatlas2";
-import random from "graphology-layout/random";
-import pagerank from "graphology-metrics/centrality/pagerank";
-import { degreeCentrality } from "graphology-metrics/centrality/degree";
+import random from "graphology-layout/random.js";
+import pagerank from "graphology-metrics/centrality/pagerank.js";
+import { degreeCentrality } from "graphology-metrics/centrality/degree.js";
 import { scaleLinear } from "d3-scale";
 import { create } from "zustand";
 import createContext from "zustand/context";

[hverlin]

Thanks @amcdnl, I can confirm that the latest version (reagraph@4.14.1) is working now

[amcdnl]

Thanks for your contribution too @hverlin !!