sim51 / react-sigma

Sigma React component
https://sim51.github.io/react-sigma/
Other
158 stars 27 forks source link

Error: Cannot use import statement outside a module #44

Closed indicozy closed 1 year ago

indicozy commented 1 year ago

Example bug report

Modification of the node default color in the settings has no effect

React-sigma-v2: 3.2.0 Sigma.js version: 2.4.0 Graphology version: 0.25.1 Operating System: Fedora 37, GNOME Web browser: Mozilla Firefox 110.0

Steps to reproduce

Check the live example https://codesandbox.io/p/sandbox/wandering-pine-ev7d3h?file=%2Fcomponents%2FNodeGraph.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A5%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A5%7D%5D

Expected behavior

No errors on browser refresh

Actual behavior

I got an error:

image

Note

If the issue has an inactivity of 30 days, it becomes stale. With an additional inactivity of 14 days, the issue is closed

indicozy commented 1 year ago

Sorry for too long log, but I've found this while testing on CodeSandbox:

yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1282 ms (165 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 1166 ms (229 modules)
error - /project/sandbox/node_modules/@react-sigma/core/lib/react-sigma_core.esm.min.js:1
import*as e from"react";import t,{createContext as n,useContext as a,useState as r,useEffect as s,useCallback as c,useRef as l,useMemo as o}from"react";import{isEqual as i}from"lodash";import u from"graphology";import{Sigma as d}from"sigma";const g=n(null),m=g.Provider;function h(){const e=a(g);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function v(){return h().sigma}function f(){const{sigma:e,container:t}=h(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a={};return Object.keys(n).forEach((t=>{a[t]=n[t],e.setSetting(t,n[t])})),()=>{e&&t&&t.offsetWidth>0&&t.offsetHeight>0&&Object.keys(a).forEach((t=>{e.setSetting(t,a[t])}))}}),[e,n,t]),a}const p=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","kill"],E=["click","rightClick","mouseup","mousedown","mousemove","doubleClick","wheel"],b=["touchup","touchdown","touchmove"],w=["updated"];function C(){const e=v(),t=f(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a=n,r=Object.keys(a),s={},c={},l=e.getSettings();return r.some((e=>["clickEdge","rightClickEdge","doubleClickEdge","downEdge"].includes(e)))&&!1===l.enableEdgeClickEvents&&(s.enableEdgeClickEvents=!0,c.enableEdgeClickEvents=!1),r.some((e=>["enterEdge","leaveEdge"].includes(e)))&&!1===l.enableEdgeHoverEvents&&(s.enableEdgeHoverEvents=!0,c.enableEdgeHoverEvents=!1),r.some((e=>["wheelEdge"].includes(e)))&&!1===l.enableEdgeWheelEvents&&(s.enableEdgeWheelEvents=!0,c.enableEdgeWheelEvents=!1),Object.keys(s).length>0&&t(s),r.forEach((t=>{const n=a[t];p.find((e=>e===t))&&e.on(t,n),E.find((e=>e===t))&&e.getMouseCaptor().on(t,n),b.find((e=>e===t))&&e.getTouchCaptor().on(t,n),w.find((e=>e===t))&&e.getCamera().on(t,n)})),()=>{Object.keys(c).length>0&&t(c),e&&r.forEach((t=>{const n=a[t];p.find((e=>e===t))&&e.off(t,n),E.find((e=>e===t))&&e.getMouseCaptor().off(t,n),b.find((e=>e===t))&&e.getTouchCaptor().off(t,n),w.find((e=>e===t))&&e.getCamera().off(t,n)}))}}),[e,n,t]),a}function O(){const e=v();return c(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])}function _(e){const t=v(),n=l();i(n.current,e)||(n.current=e);const a=c((e=>{t.getCamera().animatedZoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),r=c((e=>{t.getCamera().animatedUnzoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),s=c((e=>{t.getCamera().animatedReset(Object.assign(Object.assign({},n.current),e))}),[t,n]),o=c(((e,a)=>{t.getCamera().animate(e,Object.assign(Object.assign({},n.current),a))}),[t,n]),u=c(((e,a)=>{const r=t.getNodeDisplayData(e);r?t.getCamera().animate(r,Object.assign(Object.assign({},n.current),a)):console.log(`Node ${e} not found`)}),[t,n]);return{zoomIn:a,zoomOut:r,reset:s,goto:o,gotoNode:u}}function y(){const{container:e}=h(),[t,n]=r(!1),a=()=>n((e=>!e));return s((()=>(document.addEventListener("fullscreenchange",a),()=>document.removeEventListener("fullscreenchange",a))),[a]),{toggle:c((()=>{var t;t=e,document.fullscreenElement!==t?t.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[e]),isFullScreen:t}}const j=({graph:e,id:n,className:a,style:c,settings:g,children:h})=>{const v=l(null),f=l(null),p={className:`react-sigma ${a||""}`,id:n,style:c},[E,b]=r(null),w=l({});i(w.current,g)||(w.current=g||{}),s((()=>{let t=null;if(null!==f.current){const n=e?"function"==typeof e?new e:e:new u;t=new d(n,f.current,Object.assign({allowInvalidContainer:!0},w.current))}return b(t),()=>{t&&t.kill(),b(null)}}),[f,e,w]);const C=o((()=>E&&v.current?{sigma:E,container:v.current}:null),[E,v.current]),O=null!==C?t.createElement(m,{value:C},h):null;return t.createElement("div",Object.assign({},p,{ref:v}),t.createElement("div",{className:"sigma-container",ref:f}),O)},k=({id:e,className:n,style:a,children:r,position:s="bottom-left"})=>{const c={className:`react-sigma-controls ${n||""} ${s}`,id:e,style:a};return t.createElement("div",Object.assign({},c),r)};var x;function N(){return N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},N.apply(this,arguments)}var S,z=function(t){return e.createElement("svg",N({"aria-hidden":"true","data-prefix":"fas","data-icon":"plus",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),x||(x=e.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function H(){return H=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},H.apply(this,arguments)}var M,$=function(t){return e.createElement("svg",H({"aria-hidden":"true","data-prefix":"fas","data-icon":"minus",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),S||(S=e.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function F(){return F=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},F.apply(this,arguments)}var V=function(t){return e.createElement("svg",F({"aria-hidden":"true","data-prefix":"far","data-icon":"dot-circle",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"1em",height:"1em"},t),M||(M=e.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"})))};const G=({className:e,style:n,animationDuration:a=200,children:r})=>{const{zoomIn:s,zoomOut:c,reset:l}=_({duration:a,factor:1.5}),o={style:n,className:`react-sigma-control ${e||""}`};return t.createElement(t.Fragment,null,t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>s(),title:"Zoom In"},r?r[0]:t.createElement(z,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>c(),title:"Zoom Out"},r?r[1]:t.createElement($,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>l(),title:"See whole graph"},r?r[2]:t.createElement(V,{style:{width:"1em"}}))))};var P;function B(){return B=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},B.apply(this,arguments)}var L,I=function(t){return e.createElement("svg",B({"aria-hidden":"true","data-prefix":"fas","data-icon":"expand",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),P||(P=e.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"})))};function W(){return W=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},W.apply(this,arguments)}var Z=function(t){return e.createElement("svg",W({"aria-hidden":"true","data-prefix":"fas","data-icon":"compress",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),L||(L=e.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"})))};const D=({id:e,className:n,style:a,children:r})=>{const{isFullScreen:s,toggle:c}=y(),l={className:`react-sigma-control ${n||""}`,id:e,style:a};return document.fullscreenEnabled?t.createElement("div",Object.assign({},l),t.createElement("button",{onClick:c,title:s?"Exit fullscreen":"Enter fullscreen"},r&&!s&&r[0],r&&s&&r[1],!r&&!s&&t.createElement(I,{style:{width:"1em"}}),!r&&s&&t.createElement(Z,{style:{width:"1em"}}))):null},R=({id:e,className:n,style:a})=>{const c=v(),l=C(),{gotoNode:o}=_(),[i,u]=r(""),[d,g]=r([]),[m,h]=r(null),[f,p]=r("");s((()=>{p(`search-${Math.random().toString(36).slice(2)}`)}),[]),s((()=>{const e=[];!m&&i.length>1&&c.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(i.toLowerCase())&&e.push({id:t,label:n.label})})),g(e)}),[i]),s((()=>{l({clickStage:()=>{h(null),u("")}})}),[l]),s((()=>{if(m)return c.getGraph().setNodeAttribute(m,"highlighted",!0),o(m),()=>{c.getGraph().setNodeAttribute(m,"highlighted",!1)}}),[m]);const E={className:`react-sigma-search ${n||""}`,id:e,style:a};return t.createElement("div",Object.assign({},E),t.createElement("label",{htmlFor:f,style:{display:"none"}},"Search a node"),t.createElement("input",{id:f,type:"text",placeholder:"Search...",list:`${f}-datalist`,value:i,onChange:e=>{const t=e.target.value,n=d.find((e=>e.label===t));n?(u(n.label),g([]),h(n.id)):(h(null),u(t))}}),t.createElement("datalist",{id:`${f}-datalist`},d.map((e=>t.createElement("option",{key:e.id,value:e.label},e.label)))))};export{k as ControlsContainer,D as FullScreenControl,R as SearchControl,j as SigmaContainer,g as SigmaContext,m as SigmaProvider,G as ZoomControl,_ as useCamera,y as useFullScreen,O as useLoadGraph,C as useRegisterEvents,f as useSetSettings,v as useSigma,h as useSigmaContext};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@react-sigma/core (/project/sandbox/.next/server/pages/index.js:76:18)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/NodeGraph.tsx:12:75)
    at Object../components/NodeGraph.tsx (/project/sandbox/.next/server/components_NodeGraph_tsx.js:20:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  page: '/'
}
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 88 ms (230 modules)
error - /project/sandbox/node_modules/@react-sigma/core/lib/react-sigma_core.esm.min.js:1
import*as e from"react";import t,{createContext as n,useContext as a,useState as r,useEffect as s,useCallback as c,useRef as l,useMemo as o}from"react";import{isEqual as i}from"lodash";import u from"graphology";import{Sigma as d}from"sigma";const g=n(null),m=g.Provider;function h(){const e=a(g);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function v(){return h().sigma}function f(){const{sigma:e,container:t}=h(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a={};return Object.keys(n).forEach((t=>{a[t]=n[t],e.setSetting(t,n[t])})),()=>{e&&t&&t.offsetWidth>0&&t.offsetHeight>0&&Object.keys(a).forEach((t=>{e.setSetting(t,a[t])}))}}),[e,n,t]),a}const p=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","kill"],E=["click","rightClick","mouseup","mousedown","mousemove","doubleClick","wheel"],b=["touchup","touchdown","touchmove"],w=["updated"];function C(){const e=v(),t=f(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a=n,r=Object.keys(a),s={},c={},l=e.getSettings();return r.some((e=>["clickEdge","rightClickEdge","doubleClickEdge","downEdge"].includes(e)))&&!1===l.enableEdgeClickEvents&&(s.enableEdgeClickEvents=!0,c.enableEdgeClickEvents=!1),r.some((e=>["enterEdge","leaveEdge"].includes(e)))&&!1===l.enableEdgeHoverEvents&&(s.enableEdgeHoverEvents=!0,c.enableEdgeHoverEvents=!1),r.some((e=>["wheelEdge"].includes(e)))&&!1===l.enableEdgeWheelEvents&&(s.enableEdgeWheelEvents=!0,c.enableEdgeWheelEvents=!1),Object.keys(s).length>0&&t(s),r.forEach((t=>{const n=a[t];p.find((e=>e===t))&&e.on(t,n),E.find((e=>e===t))&&e.getMouseCaptor().on(t,n),b.find((e=>e===t))&&e.getTouchCaptor().on(t,n),w.find((e=>e===t))&&e.getCamera().on(t,n)})),()=>{Object.keys(c).length>0&&t(c),e&&r.forEach((t=>{const n=a[t];p.find((e=>e===t))&&e.off(t,n),E.find((e=>e===t))&&e.getMouseCaptor().off(t,n),b.find((e=>e===t))&&e.getTouchCaptor().off(t,n),w.find((e=>e===t))&&e.getCamera().off(t,n)}))}}),[e,n,t]),a}function O(){const e=v();return c(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])}function _(e){const t=v(),n=l();i(n.current,e)||(n.current=e);const a=c((e=>{t.getCamera().animatedZoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),r=c((e=>{t.getCamera().animatedUnzoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),s=c((e=>{t.getCamera().animatedReset(Object.assign(Object.assign({},n.current),e))}),[t,n]),o=c(((e,a)=>{t.getCamera().animate(e,Object.assign(Object.assign({},n.current),a))}),[t,n]),u=c(((e,a)=>{const r=t.getNodeDisplayData(e);r?t.getCamera().animate(r,Object.assign(Object.assign({},n.current),a)):console.log(`Node ${e} not found`)}),[t,n]);return{zoomIn:a,zoomOut:r,reset:s,goto:o,gotoNode:u}}function y(){const{container:e}=h(),[t,n]=r(!1),a=()=>n((e=>!e));return s((()=>(document.addEventListener("fullscreenchange",a),()=>document.removeEventListener("fullscreenchange",a))),[a]),{toggle:c((()=>{var t;t=e,document.fullscreenElement!==t?t.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[e]),isFullScreen:t}}const j=({graph:e,id:n,className:a,style:c,settings:g,children:h})=>{const v=l(null),f=l(null),p={className:`react-sigma ${a||""}`,id:n,style:c},[E,b]=r(null),w=l({});i(w.current,g)||(w.current=g||{}),s((()=>{let t=null;if(null!==f.current){const n=e?"function"==typeof e?new e:e:new u;t=new d(n,f.current,Object.assign({allowInvalidContainer:!0},w.current))}return b(t),()=>{t&&t.kill(),b(null)}}),[f,e,w]);const C=o((()=>E&&v.current?{sigma:E,container:v.current}:null),[E,v.current]),O=null!==C?t.createElement(m,{value:C},h):null;return t.createElement("div",Object.assign({},p,{ref:v}),t.createElement("div",{className:"sigma-container",ref:f}),O)},k=({id:e,className:n,style:a,children:r,position:s="bottom-left"})=>{const c={className:`react-sigma-controls ${n||""} ${s}`,id:e,style:a};return t.createElement("div",Object.assign({},c),r)};var x;function N(){return N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},N.apply(this,arguments)}var S,z=function(t){return e.createElement("svg",N({"aria-hidden":"true","data-prefix":"fas","data-icon":"plus",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),x||(x=e.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function H(){return H=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},H.apply(this,arguments)}var M,$=function(t){return e.createElement("svg",H({"aria-hidden":"true","data-prefix":"fas","data-icon":"minus",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),S||(S=e.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function F(){return F=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},F.apply(this,arguments)}var V=function(t){return e.createElement("svg",F({"aria-hidden":"true","data-prefix":"far","data-icon":"dot-circle",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"1em",height:"1em"},t),M||(M=e.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"})))};const G=({className:e,style:n,animationDuration:a=200,children:r})=>{const{zoomIn:s,zoomOut:c,reset:l}=_({duration:a,factor:1.5}),o={style:n,className:`react-sigma-control ${e||""}`};return t.createElement(t.Fragment,null,t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>s(),title:"Zoom In"},r?r[0]:t.createElement(z,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>c(),title:"Zoom Out"},r?r[1]:t.createElement($,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},o),t.createElement("button",{onClick:()=>l(),title:"See whole graph"},r?r[2]:t.createElement(V,{style:{width:"1em"}}))))};var P;function B(){return B=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},B.apply(this,arguments)}var L,I=function(t){return e.createElement("svg",B({"aria-hidden":"true","data-prefix":"fas","data-icon":"expand",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),P||(P=e.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"})))};function W(){return W=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},W.apply(this,arguments)}var Z=function(t){return e.createElement("svg",W({"aria-hidden":"true","data-prefix":"fas","data-icon":"compress",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),L||(L=e.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"})))};const D=({id:e,className:n,style:a,children:r})=>{const{isFullScreen:s,toggle:c}=y(),l={className:`react-sigma-control ${n||""}`,id:e,style:a};return document.fullscreenEnabled?t.createElement("div",Object.assign({},l),t.createElement("button",{onClick:c,title:s?"Exit fullscreen":"Enter fullscreen"},r&&!s&&r[0],r&&s&&r[1],!r&&!s&&t.createElement(I,{style:{width:"1em"}}),!r&&s&&t.createElement(Z,{style:{width:"1em"}}))):null},R=({id:e,className:n,style:a})=>{const c=v(),l=C(),{gotoNode:o}=_(),[i,u]=r(""),[d,g]=r([]),[m,h]=r(null),[f,p]=r("");s((()=>{p(`search-${Math.random().toString(36).slice(2)}`)}),[]),s((()=>{const e=[];!m&&i.length>1&&c.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(i.toLowerCase())&&e.push({id:t,label:n.label})})),g(e)}),[i]),s((()=>{l({clickStage:()=>{h(null),u("")}})}),[l]),s((()=>{if(m)return c.getGraph().setNodeAttribute(m,"highlighted",!0),o(m),()=>{c.getGraph().setNodeAttribute(m,"highlighted",!1)}}),[m]);const E={className:`react-sigma-search ${n||""}`,id:e,style:a};return t.createElement("div",Object.assign({},E),t.createElement("label",{htmlFor:f,style:{display:"none"}},"Search a node"),t.createElement("input",{id:f,type:"text",placeholder:"Search...",list:`${f}-datalist`,value:i,onChange:e=>{const t=e.target.value,n=d.find((e=>e.label===t));n?(u(n.label),g([]),h(n.id)):(h(null),u(t))}}),t.createElement("datalist",{id:`${f}-datalist`},d.map((e=>t.createElement("option",{key:e.id,value:e.label},e.label)))))};export{k as ControlsContainer,D as FullScreenControl,R as SearchControl,j as SigmaContainer,g as SigmaContext,m as SigmaProvider,G as ZoomControl,_ as useCamera,y as useFullScreen,O as useLoadGraph,C as useRegisterEvents,f as useSetSettings,v as useSigma,h as useSigmaContext};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@react-sigma/core (/project/sandbox/.next/server/pages/index.js:76:18)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/NodeGraph.tsx:12:75)
    at Object../components/NodeGraph.tsx (/project/sandbox/.next/server/components_NodeGraph_tsx.js:20:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}
tejovanthn commented 1 year ago

@indicozy, I see that you're using nextjs, would this FAQ help resolve your issue?

indicozy commented 1 year ago

Yes, thank you!