foxitsoftware / create-react-app-hook-example Goto Github PK

single-spa-layout.min.js:2 Uncaught Error: application '@textile/biz-components' died in status LOADING_SOURCE_CODE: Automatic publicPath is not supported in this browser
at UIExtension.full.js:111:169840
at UIExtension.full.js:111:170011
at UIExtension.full.js:111:171098
at UIExtension.full.js:1:65
at ./node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js (UIExtension.full.js:1:203)
at webpack_require (bootstrap:19:1)
at ./src/components/foxit-web-pdf/FoxitWebPDFApp.tsx (format-manager-provider.component.tsx:21:8)
at webpack_require (bootstrap:19:1)
at ./src/screens/pdf-viewer-sample-screen.component.tsx (my-wizard-dialog.component.tsx:231:8)
at webpack_require (bootstrap:19:1)
(anonymous) @ UIExtension.full.js:111
(anonymous) @ UIExtension.full.js:111
(anonymous) @ UIExtension.full.js:111
(anonymous) @ UIExtension.full.js:1
./node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js @ UIExtension.full.js:1
webpack_require @ bootstrap:19
./src/components/foxit-web-pdf/FoxitWebPDFApp.tsx @ format-manager-provider.component.tsx:21
webpack_require @ bootstrap:19
./src/screens/pdf-viewer-sample-screen.component.tsx @ my-wizard-dialog.component.tsx:231
webpack_require @ bootstrap:19
./src/routes.tsx @ root.component.tsx:22
webpack_require @ bootstrap:19
./src/root.component.tsx @ refresh-token.hook.tsx:9
webpack_require @ bootstrap:19
(anonymous) @ 1.js:3
(anonymous) @ textile-biz-components.local-dev.tsx:18
execute @ textile-biz-components.local-dev.tsx:18
i @ system-core.js:279
e @ system-core.js:275
(anonymous) @ system-core.js:232
setTimeout (async)
y @ single-spa-layout.min.js:2
(anonymous) @ app-errors.js:9
a @ app-errors.js:9
(anonymous) @ load.js:147
Promise.catch (async)
(anonymous) @ load.js:137
Promise.then (async)
X @ load.js:24
(anonymous) @ reroute.js:78
Promise.then (async)
d @ reroute.js:77
Rt @ reroute.js:69
Pt @ apps.js:133
_callee$ @ textile-runtime.ts:190
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_initTextile @ textile-runtime.development.js:3085
initTextile @ textile-runtime.ts:60
(anonymous) @ ui/:93
Promise.then (async)
(anonymous) @ ui/:93
Show 15 more frames
Show less
UIExtension.full.js:111 Uncaught (in promise) Error: application '@textile/biz-components' died in status LOADING_SOURCE_CODE: Automatic publicPath is not supported in this browser
at UIExtension.full.js:111:169840
at UIExtension.full.js:111:170011
at UIExtension.full.js:111:171098
at UIExtension.full.js:1:65
at ./node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js (UIExtension.full.js:1:203)
at webpack_require (bootstrap:19:1)
at ./src/components/foxit-web-pdf/FoxitWebPDFApp.tsx (format-manager-provider.component.tsx:21:8)
at webpack_require (bootstrap:19:1)
at ./src/screens/pdf-viewer-sample-screen.component.tsx (my-wizard-dialog.component.tsx:231:8)
at webpack_require (bootstrap:19:1)

Hi i am getting the above errors when integrating foxit-pdf-reader  i'm using a single-spa with react please find the 

webpack.config.js code below

`const path = require("path");
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");
const CopyPlugin = require("copy-webpack-plugin");

const libraryModulePath = path.resolve(
"node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library"
);
const libPath = path.resolve(libraryModulePath, "lib");

module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "textile",
projectName: "biz-components",
webpackConfigEnv,
argv,
});

// Use the local development entrypoint for local builds builds.
if (webpackConfigEnv.local_dev === "true") {
const parsedPath = path.parse(defaultConfig.entry);
defaultConfig.entry = ${parsedPath.dir}${path.sep}${parsedPath.name}.local-dev${parsedPath.ext};
}

return merge(defaultConfig, {
output: {
filename: textile-biz-components.${argv.mode}${ argv.mode === "production" ? ".min" : "" }.js,
},
// entry: {
// preload: path.resolve("app/preload.js"),
// },
plugins: [
// Copy the default static files.
new CopyPlugin({
patterns: [
{
from: "static",
to: "",
},
],
}),
new CopyPlugin({
patterns: [
{
from: libPath,
to: "foxit-lib",
force: true,
},
],
}),
],
externals: [
/**
* Make shared modules external to prevent from packaging them up with this module's webpack.
* Use both exact match and regex to treat all submodules as external, thus forcing runtime errors
* when developers import from submodules.
*
* Incorrect:
* import Button from "@textile/mui/Button"
*
* Correct:
* import { Button } from "@textile/mui"
*
*/
"UIExtension",

  "PDFViewCtrl",

  "axios",
  new RegExp("^axios/.*$"),

  "react",

  "react-dom",
  new RegExp("^react-dom/.*$"),

  "history",
  new RegExp("^history/.*$"),

  "react-router",
  new RegExp("^react-router/.*$"),

  "react-router-dom",
  new RegExp("^react-router-dom/.*$"),

  "prop-types",

  "@textile/runtime",
  new RegExp("^@textile/runtime/.*$"),

  // Add textile material ui common utility module.
  // This module is supposed to be included in the Fabric stack by adding chart textile-common
  // to the application's Chart.yaml dependencies section.
  "@textile/common",
  new RegExp("^@textile/common/.*$"),

  "@textile/mui",
  new RegExp("^@textile/mui/.*$"),

  "@textile/ag-grid",
  new RegExp("^@textile/ag-grid/.*$"),

  /**
   * We still need to externalize @mui/material because we use @mui/icons-material through tree shaking
   * and the icons code explicitly refers to @mui/material/* packages. We want to make sure we won't end up
   * bundling @mui/material code which is already provided to us through @textile/mui.
   */
  "@mui/material",
  new RegExp("^@mui/material/.*$"),
],

});
};
`

I have a React app that will only show the PDFViewer on certain pages. The Foxit UI will be displayed the first time it is loaded, but if you navigate away and come back, the screen is blank. Only a browser refresh will show the UI again.

You can reproduce the issue by modifying App.js to conditionally render the PDFViewer:

import {useEffect, useRef, useState} from 'react';
import './App.css';
import PDFViewer from './components/PDFViewer';

function App() {
    const pdfuiRef = useRef(null);
    const [show, setShow] = useState(true);

    useEffect(() => {
        const pdfui = pdfuiRef.current;
        if(!pdfui) {
            return;
        }
        // Here, you can do anything with the pdfui instance.
        function handleWindowResize() {
            pdfui.redraw();
        }
        window.addEventListener('resize', handleWindowResize);
        return () => {
            // Here, you can perform any destruction actions.
            window.removeEventListener('resize', handleWindowResize);
        };
    }, [pdfuiRef]);
    const externalViewerOptions = {
        // more viewer options
    };


    return (
        <div className="App">
            <button onClick={() => setShow(!show)}>Toggle PDFViewer</button>
            { show ?
                <PDFViewer ref={pdfuiRef} viewerOptions={externalViewerOptions}></PDFViewer> :
                <div>PDFViewer is not mounted.</div>
            }
        </div>
    );
}

export default App;