Can it support Nextjs？

[fws407296762]

Describe the bug

After introducing @vivliostyle/react, an error was reported: ReferenceError: window is not defined

To Reproduce

import { Renderer } from "@vivliostyle/react";
export default function Page(){
    const sample = "https://vivliostyle.github.io/vivliostyle_doc/samples/gon/index.html";
  return (
    <><Renderer source={sample}  /></>
  )
}

[MurakamiShinyu]

I am not familiar with Next.js, but I think the error "ReferenceError: window is not defined" is caused by the fact that the code using window is executed on the server side where window is not defined.

I think @vivliostyle/react does not support server-side rendering because it uses @vivliostyle/core which is a browser-only library.

[fws407296762]

@MurakamiShinyu Thank you，I use next/dynamic resolve it.

DynamicRenderer.tsx

import { Renderer } from "@vivliostyle/react";
import {Fragment, useState} from "react";

const DynamicRenderer = ()=>{
  const [page, setPage] = useState(1);
  const sample =
    "https://vivliostyle.github.io/vivliostyle_doc/samples/gon/index.html";

  function next() {
    setPage((page) => page + 1);
  }

  function prev() {
    setPage((page) => page - 1);
  }

  function onLoad(state) {
    console.log(state.epageCount, state.docTitle);
  }
  return (
    <Fragment>
      <Renderer source={sample} page={page} onLoad={onLoad} />
      <button onClick={next}>Next</button>
      <button onClick={prev}>Prev</button>
    </Fragment>
  )
}

export default DynamicRenderer

Page.js

import dynamic from 'next/dynamic';
const DynamicRenderer = dynamic(() => import('./DynamicRenderer'), {
  ssr: false // This ensures the component is not SSR'd
});

const Page = ()=>{
  return (
    <DynamicRenderer></DynamicRenderer>
  )
}

export default Page