CODEWITHSUNDEEP
reactjstypescriptrenderingpdftron
feres
feres

Reputation: 1

Maximum update depth exceeded when i add WebViewer of pdftron ( React and TypeScript)

When I add WebViewer of pdftron I receive this error :

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array or one of the dependencies changes on every render.

I try these two sets of code but always the same error :

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);

  const xx = () => {
    console.log("start");
    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current!
    );
    console.log("end");
  };

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <button onClick={xx}>here</button>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log("start");
    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current!
    );
    console.log("end");
  }, []);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

It always shows that error, I try with the code from the website, but the problem is that I don't find a solution to ReactJs with Typescript.

Upvotes: 0

Views: 108

Answers (2)

Roger
Roger

Reputation: 1

A problem I have come across is that if the path to the library is not correct then really weird results can occur.

Check that you mean to use

  path: "/webviewer/lib",

and not

  path: "/lib",

Upvotes: 0

cmendoza
cmendoza

Reputation: 21

I haven't been able to reproduce this error on the WebViewer React Sample using both versions of your component. Are you able to provide a runnable sample of your app?

Upvotes: 1

Related Questions