SSR support? Is react v17 fine?

[YuriGor]

Hi, I am trying to use react-arrows with server-side rendering (next.js project) If I try to use directly - I have an error about missing window object on server. I also tried to wrap Arrow into my own component and import dynamically like this:

import dynamic from 'next/dynamic';
const RelationArrow = dynamic(() => import('../../components/relation/RelationArrow'), {
  ssr: false,
});

But when I try to render it - webpack is going crazy: https://pastebin.com/DmPRcjpk

Any suggestions to workaround please?

[YuriGor]

Here is my wrapper component:

import Arrow from 'react-arrows';
import { makeStyles } from '@material-ui/core/styles';

export default function RelationArrow({ model, ...props }) {
  const classes = useStyles();
  return (
    <Arrow
      className={classes.arrow}
      from={{
        node: () => document.getElementById(model.from_id),
        translation: [-0.5, -1],
      }}
      to={{
        node: () => document.getElementById(model.to_id),
        translation: [0.9, 1],
      }}
    />
  );
}

const useStyles = makeStyles((theme) => ({
  arrow: {
    pointerEvents: 'none',
    '& .arrow__path': {
      stroke: '#000',
      fill: 'transparent',
      strokeDasharray: '4 2',
    },
    '& .arrow__head line': { stroke: '#000', strokeWidth: '1px' },
  },
}));

[sasza2]

I will think about it @YuriGor

[YuriGor]

Thank you, no hurry, anyway I decided to implement arrows from scratch, to render them by given absolute coordinates instead of tracking existing html nodes geometry, since all the geometry data is already available in my case.

[larzknoke]

Hi, I have the same problem if I use the package with nextjs.

If I import the package the normal way I got: ReferenceError: window is not defined

and if I import it dynamic:

const Arrow = dynamic(() => import("react-arrows"), { ssr: false });

const DIRECTION = dynamic(
  () => import("react-arrows").then((mod) => mod.DIRECTION),
  { ssr: false }
);
const HEAD = dynamic(() => import("react-arrows").then((mod) => mod.HEAD), {
  ssr: false,
});

main.js?715c:1 Error: unexpected type

What's the right way to import the package dynamic with nextjs an no ssr ?

Thanks for help!

Lars

Update

I found out the direction is undefined but how can I fix that?

and so an error is thrown

              var e = (function (t) {
                  if (!N(t.node))
                    throw new Error(
                      "point is null, check if 'from'/'to' exists"
                    );
                  var e = N(t.node).getBoundingClientRect();
                  console.log(t);
                  switch (t.direction) {
                    case s.TOP_LEFT:
                      return { x: e.x, y: e.y };
                    case s.TOP:
                      return { x: e.x + e.width / 2, y: e.y };
                    case s.TOP_RIGHT:
                      return { x: e.x + e.width, y: e.y };
                    case s.RIGHT:
                      return { x: e.x + e.width, y: e.y + e.height / 2 };
                    case s.BOTTOM_LEFT:
                      return { x: e.x, y: e.y + e.height };
                    case s.BOTTOM:
                      return { x: e.x + e.width / 2, y: e.y + e.height };
                    case s.BOTTOM_RIGHT:
                      return { x: e.x + e.width, y: e.y + e.height };
                    case s.LEFT:
                      return { x: e.x, y: e.y + e.height / 2 };
                    default:
                      throw new Error("unexpected type");
                  }
                })(t),