Support for Gatsby.js

Technical Support
1

PDF.js Express Version
7.2.2

Detailed description of issue
My project is built using Gatsby and I was following the getting started guide for React. (gatsby uses react) I made sure to copy all the files to the static/public folder. However when I initialize the page, it throws a 404 error inside the div where the webviewer ref is.
’ There’s not a page yet at /webviewer/lib/ui/index.html’

Expected behaviour

Screen Shot 2021-01-29 at 3.30.00 PM
Screen Shot 2021-01-29 at 3.30.00 PM1190×293 37.3 KB

Does your issue happen with every document, or just one?
Every document

Link to document

Code snippet
import React, { useEffect, useRef } from ‘react’
import Layout from ‘components/Layout’
import WebViewer from ‘@pdftron/pdfjs-express’

const Test = () => {
	const viewer = useRef(null)
	useEffect(() => {
		WebViewer(
			{
				path: '/webviewer/lib',
				initialDoc: 'https://assets.ctfassets.net/xo7k5gkhtsb4/6BVRpmOL6sKkjXKHZj2MXQ/4d3825f979999fd81f5fd6ee937df5f6/Job-Embedded-PD-2015.pdf'
			},
			viewer.current
		).then((instance) => {
			
		})
	}, [])
	return (
		<Layout>
			<div className="h-screen">
				<p>TEST PDF</p>
				<div className="webviewer" ref={viewer}></div>
			</div>
		</Layout>
	)
}

export default Test
2

Hi there!

This is actually an issue I’ve had in the past with Gatsby as well. It happens because Gatsby is unable to serve static html files in development mode.

There is an open ticket you can view in the Gatsby repo here, and you can view a workaround that I actually posted a little while ago here.

Basically you just need to find another way to serve the PDF.js Express files in development mode.

Thank you,
Logan

3

Thanks for linking to that ticket. While I didn’t use your work around solution, I was able to find a bit simpler of a work around in that ticket. For anyone here looking in the future, all I had to do was add this snippet to my gatsby-node.js file:

const express = require('express')

exports.onCreateDevServer = ({ app }) => {
app.use(express.static('public'))
}
1 Like