create-react-app-hook-example's People
Forkers
luonan-chencreate-react-app-hook-example's Issues
Integrating foxit-pdf-reader with single-spa-react throws the error died in status LOADING_SOURCE_CODE: Automatic publicPath is not supported in this browser
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/.*$"),
],
});
};
`
PDFViewer only renders once
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;
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.