Module not found: Error: Default condition should be last one (react-sigma)

142 views Asked by At

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

Here is sigma_render.tsx 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've been searching for answer in internet, but nothing helped me. My only solution in mind is deploying my project on windows server, but its not the way i want to do it

0

There are 0 answers