Problem with working on Unix

[nomoredope]

Im developing graph-map web application on React using sigma.js and react-sigma modules. While i have been developing it on my windows 10 os, everything was fine, but when i put it on macOS or linux (even Docker container), i've got this type of error:

ERROR in ./src/components/sigma_render.tsx
Module not found: Error: Default condition should be last one

sigma_render.tsx - the only component, where i use react-sigma

Here is my code sigma_renderer code:

import { FC, useEffect, useState } from "react";
import Graph from "graphology";
import {SigmaContainer, SearchControl, ControlsContainer, ZoomControl, FullScreenControl, } from "@react-sigma/core";
import "@react-sigma/core/lib/react-sigma.min.css";
import Loader from "./Loader";
import {useTypeSelector} from "./hooks/useTypeSelector";
import {fetchNodes} from "./store/action-creators/node";
import {useActions, useCheckBox} from "./hooks/useActions";
import {fetchFilter} from "./store/action-creators/filter"
import Events from "./useRegisterEvents";
import {store} from "./store";
import Modal from "./Modal";
import { CheckBox } from "./CheckBox";
import {Auth} from "./Auth";

const DemoGraph: React.FC<{}> = () => {
const [content, setContent] = useState({
x: 0,
y: 0
})

store.subscribe(() => {
    // @ts-ignore
    setContent(store.getState().modal.modalData.content)

});

const {data, error, loading} = useTypeSelector(state => state.node)
const {dataCheckState} = useTypeSelector(state => state.checkBox)
const {loading1} = useTypeSelector(state => state.modal)

const {fetchNodes} = useActions()
const{fetchFilter} = useCheckBox()
useEffect(()=>{
    fetchNodes()
    fetchFilter()
}, [])


    const qgraph = new Graph();

    for (let key in data) {
        if (store.getState().checkBox.dataCheckState[key]) {
            for (let i = 0; i < data[key].objects.length; i++) {
                qgraph.addNode(data[key].objects[i].id, {
                    x: data[key].objects[i].x, y: data[key].objects[i].y, size: (data[key].objects[i].size)**0.5 + 1,
                    label: data[key].objects[i].name, color: data[key].objects[i].color
                });
                console.log(data[key].objects[i].id)
            }
        }
    }
    for (let key in data) {
        if (store.getState().checkBox.dataCheckState[key]) {
            for (let i = 0; i < data[key].links.length; i++)
                if (qgraph.hasNode(data[key].links[i][1]) && qgraph.hasNode(data[key].links[i][0]))
                    qgraph.addEdge(data[key].links[i][0], data[key].links[i][1], {type: 'arrow', size: 2})
            console.log('render')
        }
    }
console.log(store.getState().checkBox.dataCheckState)
return (
    <SigmaContainer
        graph={qgraph}
        style={{width: "100vw",
            height: "100vh"}}
        settings={{
            defaultEdgeType: "arrow",
            labelDensity: 0.07,
            labelGridCellSize: 60,
            labelRenderedSizeThreshold: 15,
            labelFont: "Lato, sans-serif",
            zIndex: true,
        }}
    >
        {!(store.getState().auth.flag) && [<Auth login={''} password={''} flag={false}/>]}
        {store.getState().auth.flag && [
            <div>
            <Loader active={loading}/>
            <Loader active={loading1}/>
            {error && [<p>{error}</p>]}
            <Events/>
            <Modal data={store.getState().modal.modalData}/>
            <CheckBox dataCheckBox={store.getState().checkBox.dataCheckState}/>
            <ControlsContainer position={"bottom-right"}>
                <ZoomControl />
                <FullScreenControl />
            </ControlsContainer>
            <ControlsContainer position={"top-right"}>
                <SearchControl style={{ width: "200px" }} />
            </ControlsContainer>
            </div>
]}

    </SigmaContainer>
);

};

export default DemoGraph;

I think, there is problem in package.json in react-sigma, there are some incorrect dependencies. Becouse when i use dockerfile:

FROM node:20

EXPOSE 4000

WORKDIR /frontend

COPY . .

RUN npm ci

CMD npm run start

with .dockerignore

node_modules

There is an error, but when i copy node_modules without .dockerignore everything is working

[sim51]

Hi,

I think that your issue has nothing to do with react-sigma, but without a reproducible example and/or the full stack trace of the error I can't be sure.

Which version are you using ?
What happen when you remove the import of the css file, does it work ?

What I can tell you is :

• I'm on linux, and it works perfectly in many projects
• I never seen the error Module not found: Error: Default condition should be last one
• your qgraph should be in a useState and loaded in a useEffect

[nomoredope]

I've found a mistake in package.json of react-sigma. This error is appearing, when you declaring in package.json

............
"export": 
    {
    ".": 
       {  
           "default" : ".........",
           "types": "........."
       }
       .........
       

You should declare default as LAST ONE, thats what this error about:

.........
"export": 
    {
    ".": 
       {  
           "types" : ".........",
           "default": "........."
       }
       .........
       

And after this manipulation everything working fine

[sim51]

Humm, by searching on the net on such an issue, I found similar cases.
Good catch, thanks a lot !

[sim51]

I released the v3.4.2 with the fix.
Can you try it and tell me if it's OK on your side ?

Thanks.

[nomoredope]

Yeah, now it works, thanks!