Hi Diego,
the step to reproduce is:
- implement the trial exemple of react pdftron inside a gatsby repo
- launch cli ‘gatsby develop’
info: the data element is a blob
import React, { useState, useEffect, useContext, useRef } from "react"
import { useSelector } from "react-redux"
import { Grid, Dialog, IconButton, Box, SvgIcon, useTheme } from "@material-ui/core"
import CloseIcon from "@fluentui/svg-icons/icons/dismiss_20_regular.svg"
import WebViewer from "@pdftron/webviewer"
import Sidebar from "./Sidebar"
import { SnackContext } from "../../SnackMessage"
import { errcodeToMessage } from "../../../state/errorReducer"
import { downloadDocumentData } from "../../../actions/document"
export default function DocumentPreview(props) {
const { close, documentID, fromWorkflowSelection, fromWorkflowRequest } = props
const theme = useTheme()
const { setSnackContent } = useContext(SnackContext)
const viewerDiv = useRef(null)
// get it from store to have the last updated version
const document = useSelector(state => state.documents.find(e => e.id === documentID))
const [data, setData] = useState(document.blobData)
useEffect(() => {
if (document.id && !data)
downloadDocumentData(document.id).then(response => {
setData(response)
}).catch(err => {
setSnackContent({
severity: "error",
message: errcodeToMessage(err).message,
})
})
}, [data, document.id, setSnackContent])
useEffect(() => {
WebViewer(
{
path: '/lib',
initialDoc: data,
},
viewer.current,
).then((instance) => {
console.log(instance)
}), [data])
const handleClose = () => close()
if (!document || !data) {
return null
}
return (
<Dialog open fullWidth maxWidth="lg" onClose={handleClose} PaperProps={{ style: { borderRadius: 10, backgroundColor: "#97969C" } }}>
<Box style={{ overflow: "hidden", height: "100%", width: "100%" }} clone>
<Grid container wrap="nowrap">
<Grid item>
<Box
position="sticky"
left="0"
top="0">
<IconButton onClick={handleClose}>
<SvgIcon viewBox="0 0 20 20" component={CloseIcon} />
</IconButton>
</Box>
</Grid>
<Grid item xs={9}>
<Box component="div" ref={viewerDiv} style={{ height: "100vh" }} />
</Grid>
<Grid item xs={3}>
<Box pb={1} pl={1} mt={-2} style={{
backgroundColor: theme.palette.backgroundColor.secondary,
position: "sticky",
right: "0",
top: " 0",
overflowY: "scroll",
overflowX: "hidden",
height: "100%",
width: "100%",
}}>
<Sidebar {...{ document, fromWorkflowSelection, fromWorkflowRequest, close }} />
</Box>
</Grid>
</Grid>
</Box>
</Dialog>
)
}
i have also try to put “@pdftron” inside the gatsby-node.js for exclude on build-html but it’s not fixing the window problem
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
actions.setWebpackConfig({
devtool: "eval-source-map",
})
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
{
test: /pdfjs-dist/,
use: loaders.null(),
},
{
test:/@pdtftron/,
use: loaders.null(),
},
],
},
})
}
}
