Section:

WebViewer is loading in an infinite loop

When using a single page app boilerplate such as create-react-app, sometimes the default settings will redirect invalid requests (404s) to the home page.

This can cause infinite loading loops when WebViewer tries to load files, because instead of finding the UI's index.html file , it finds the main index.html file of your app instead. This index file then is loaded inside WebViewer's iframe.

For example, take the following React code:

JavaScript

1import React, {useEffect} from 'react';
2import './App.css';
3
4const  App = () => {
5
6  useEffect(() => {
7
8    window.WebViewer({
9      path: '/test', // < ---------- This is invalid / 404
10    }, document.getElementById('app'))
11
12  }, [])
13
14  return (
15    <div className="App" id='app' style={{border: '1px solid black', padding: '20px'}}>
16      My App!
17    </div>
18  );
19}
20
21export default App;

In this example, path is invalid and points to a 404, which create-react-app will redirect to your apps index.html. The result looks like this:

Apryse Docs Image

If you run into this scenario, please make sure that you are passing a valid path to the path constructor option, and that it points to the lib folder that is included with the WebViewer package.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales