Trying mupdf library directly with React

[jamie-lemon]

With this setup we can run a React-based app via a node server, so basically a REST API provided by the node server to the react client.

However, if we just want to run a React-based app directly upon the MuPDF library, i.e.:

It fails to compile with:

./node_modules/mupdf/lib/mupdf-wasm.js:130:7
Module not found: Can't resolve 'fs'

Could there be some further environmental setup that the wasm library needs to understand?

[jamie-lemon]

@ccxvii @mipo1357 Please note I create a simple React App starter for this, please see this branch: https://github.com/ArtifexSoftware/mupdf.js/tree/react-example . You can see the compile problem after an npm start . There is hopefully something obvious I'm doing wrong.

[jamie-lemon]

@ccxvii it could be that the solution here could work for us, requires further investigation: https://github.com/emscripten-core/emscripten/issues/13074

[Vilhelm-Ian]

I got mupdf to work with react with the following approach.

i import this in the index.html

<script type="module" src="/mupdf-view.js"></script>
<script type="module" src="/mupdf-view-page.js"></script>

import { MupdfDocumentViewer } from "../mupdf-view-page.js"

function Reader() {

useEffect(()=>{
   new MupdfDocumentViewer(mupdfView)
},[])

return (
                <div id="reader">
                    <div id="grid-sidebar">
                        <ul id="outline" />
                    </div>
                    <div id="grid-main" class="sidebarHidden">
                        <div id="pages" />
                        <div ref={placeholder} id="placeholder">
                            <div>Loading WASM, please wait...</div>
                        </div>
                    </div>
                    <div
                        id="search-dialog"
                        class="dialog"
                        style="display: none"
                    />
                    <input
                        type="file"
                        id="open-file-input"
                        style="display: none"
                        accept=".pdf,.xps,application/pdf"
                        onChange={(e) => {
                            documentViewer.openFile(e.target.files[0])
                        }}
                    />
)
}