need help: Promise.withResolvers is not a function

[DidoFitch]

Hello, this issue is not a bug but I need some help.

I‘m using version 1.10.0 of this repository, and in older versions of Chrome (earlier than 105), Promise.withResolvers is not supported, causing an error when I preview PDFs: Promise.withResolvers is not a function.

I tried using Babel to support it or ask ChatGPT, but it didn't work. Can anyone help me?

I have tried this:

yarn add @babel/core @babel/preset-env @vitejs/plugin-vue vite-plugin-babel -D

yarn add promise-polyfill

vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteBabel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue(),
    viteBabel()
  ]
});

main.js:

import 'promise-polyfill/src/polyfill';
if (!Promise.withResolvers) {
  Promise.withResolvers = function() {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

[TaTo30]

After checking this I found this problem on two points:

The first one is from pdf.js file and can be patched using a polyfill or the code @DidoFitch shared.

The second one is from the pdf.worker.js and cannot be polyfilled surely because the worker is running on different thread and context. In this library the worker is embebed directly:

vue-pdf/src/components/composable.ts

Line 2 in de24ae4

import PDFWorker from 'pdfjs-dist/build/pdf.worker.min?url'

Using the legacy worker fix the second point but It's still required to add the polyfill for the first point.

import PDFWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'

[TaTo30]

This should works, It's important configure the legacy worker before using usePDF:

<script setup lang="ts">
+ import * as PDFJS from 'pdfjs-dist';
+ import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url';
import { VuePDF, usePDF } from '@tato30/vue-pdf';

+ PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" />
  </div>
</template>

[ChiefTechDev]

Hi TaTo!
I need you help
Could you tell me how can I fix this deployment issue?
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

[ChiefTechDev]

I am sorry to border you.
I fixed this problem.
`
...

  default_type application/octet-stream;
  include  /etc/nginx/mime.types;
  # include the server config for your application
  include /etc/nginx/app.conf;

  types {
      text/javascript                 js;
      application/javascript          mjs;
  }

...
`
I updated nginx.conf file.
I leave code of nginx.conf file for other developers
Thank you for your time.

[ZumelzuR]

There are PR for this?

[TaTo30]

@ZumelzuR Nope, this issue can be fixed using #127 (comment)

It is not necessary to do something on source code.

[ZumelzuR]

@ZumelzuR Nope, this issue can be fixed using #127 (comment)

It is not necessary to do something on source code.

I saw that there are some code in master (that is doing this PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker) but is there is not a compiled version of this. Would be great have this master changes on a compiled version :)

[QJvic]

I add

import * as PDFJS from "pdfjs-dist";
import LegacyWorker from "pdfjs-dist/legacy/build/pdf.worker.min?url";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import "@tato30/vue-pdf/style.css";
PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker;

But it does not work.