# PDFJSExpress + custom webviewer-ui.min.js

**URL:** <https://pdfjs.community/t/pdfjsexpress-custom-webviewer-ui-min-js/890>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [July 15, 2021, 1:11pm UTC](https://pdfjs.community/t/pdfjsexpress-custom-webviewer-ui-min-js/890 "2021-07-15T13:11:33Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![kristina](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@kristina](https://pdfjs.community/u/kristina)\
**Post date:** [July 20, 2021, 8:58am UTC](https://pdfjs.community/t/pdfjsexpress-custom-webviewer-ui-min-js/890/6 "2021-07-20T08:58:42Z")

</div>

**Update:**  
Resolved. The issue was the differences in `index.html`:

Original:

```javascript
...
<body>
  <div id="app"></div>
  <div id="line-connector-wrapper">
    <div id="line-connector-root"></div>
  </div>
  <script src="../core/CoreControls.js"></script>
  <script src="../core/pdfjs/PDFJSDocumentType.js"></script>
  <script src="../core/pdfjs/UIConfig.js"></script>
  <script src="webviewer-ui.min.js"></script>
</body>
...

```

Replacement:

```javascript
...
<body>
  <div id="app"></div>
  <div id="line-connector-wrapper">
    <div id="line-connector-root"></div>
  </div>
  <div id="outline-edit-popup-portal"></div>
  <script src="../core/CoreControls.js"></script>
  <script src="webviewer-ui.min.js"></script>
</body>
...

```

So basically I replaced everything within the `ui` folder except for `index.html` and now it works. I think it would probably be good to have this entire procedure in the docs 🙂

If I run into any more issues and/or have other question, do you mind if I just post in this thread, or should I open a new one?

Thanks.

* * *

~~Hi, so this doesn’t actually work for me.~~ **[Resolved]** I’ll try to give you as many details as possible.

**Dev environment:**  
I pulled `webviewer-ui` from Github as described in docs, branch 7.3, and got it to run. I implemented a feature we needed (not many changes, PR here - [7.3 nucleus by GTCrais · Pull Request #1 · GTCrais/webviewer-ui · GitHub](https://github.com/GTCrais/webviewer-ui/pull/1/files)), everything works in the dev environment. I then ran `npm run build` which created the `build` folder with everything in it:

![build_folder](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/d2570822c77f8087204de926464dff1e6595dc2f.png)

This is the console output in dev env, no issues:

![dev_console](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/20ea153266134b40a7f893bfa870f38a47fec8e1.png)

**Production environment:**  
As we discussed here, I copied the contents of the build folder and pasted it into `node_modules/@pdftron/pdfjs-express/public/ui`, which replaced the original files there. I made sure I’m running the same version of UI and Core, which is 7.3.3. After running `npm run dev`, everything builds fine, PDFJSExpress initializes, but then it breaks when trying to load a document. I also tried running (my custom) UI v7.3.3 with Core v7.3.5 but I got the same error.

Console output:

 ![prod_console](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/0486e8e235239ef016cb3e372bba3d6a7645b669.png)

Viewer stuck at loading:

 ![viewer_stuck](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/55f708c4feecd1f337bf67765e67fef2bca4e172.png)

When I just install PDFJSExpress directly through npm and don’t replace the viewer with my modified one (so just pull `"@pdftron/pdfjs-express": "7.3.3"` through npm), everything works as expected.

Please advise. Thanks!

---

_[View the full topic](https://pdfjs.community/t/pdfjsexpress-custom-webviewer-ui-min-js/890)._