Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

While using the Pdfjs library, I encountered an error message that reads:

Top-level await is not available in the configured target environment ("chrome119.0", "edge119.0", "firefox115.0", "ios16.0", "safari16.0" + 7 overrides)

/****/ webpack_exports = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromise = webpack_exports);**

There was a suggestion on Github to resolve this issue with Vite, however, Vite is not part of my project setup.

This excerpt is from my tsconfig file:

{
  "compileOnSave": false,
// Compiler options listed here...
}

Please refer to this link for more information.

I attempted changing the target in tsconfig from ES2022 to ESNext, but unfortunately, it did not resolve the issue.

javascriptangulartypescriptpdfjs-dist

Answer №1

I encountered a similar issue and found success by reverting back to version 3 of pdfjs-dist.

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb8b9f9d9188d69f9288affbbdd5cacad5cacccf">[email protected]</a>

It seems that this solution worked because it predates the usage of top level await in the package.

Failed Fix Attempts

Despite trying other solutions, such as editing vite.config.ts as suggested in the Angular CLI issues (which was not accessible) and referenced in the pdf.js issues, none were successful.

I also attempted using the vite-plugin-top-level-await package, but it did not resolve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The layout of a Vuex store in a sprawling website

Currently immersed in the development of a sprawling website using Vue.js, I find myself grappling with the architecture of Vuex store. The current folder structure is as follows: . ├── build ├── src │ └── components │ ├ ...

javascriptvue.jsvuexvuex-modules

Cannot access Nextjs Query Parameters props within the componentDidMount() lifecycle method

I have been facing a challenge with my Next.js and React setup for quite some time now. In my Next.js pages, I have dynamic page [postid].js structured as shown below: import Layout from "../../components/layout"; import { useRouter } from "next/router"; ...

javascriptreactjsnext.js

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

htmlcssangularprimengfieldset

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

javascriptcssreactjsgoogle-maps

The category has been defined but remains inaccessible. What could be the reason for this limitation?

I've been utilizing this bson library along with the corresponding declaration found here. Within this library, there is a method called serialize():Buffer which returns a Buffer. When I execute the following code: let data:Buffer = this.serializer.s ...

typescript

Refresh the context whenever the state object changes

Within my application, I am utilizing a PageContext to maintain the state of various User objects stored as an array. Each User object includes a ScheduledPost object that undergoes changes when a user adds a new post. My challenge lies in figuring out how ...

javascriptnode.jsreactjstypescriptstate

Facing issues with ReactCSSTransitionGroup as transitionAppear feature is not functioning

I'm having trouble with the appearance and disappearance of notifications. The transitionAppear property doesn't seem to be working as expected. I'm adding the notification popup item to the onBlur event. The animation for the leave event wo ...

javascriptreactjsanimationjsxreactcsstransitiongroup

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

typescript

Send submitted form field arrays to the database

I am currently developing a sewing management app that includes an order page where users can place multiple orders. However, all orders need to be invoiced with one reference code. On the first page, I collect basic details such as pricing, and on the nex ...

javascriptphpjquerymysqlajax

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Could you please explain why the function event.stopPropagation() is not working on the switch element? Whenever I click on the switch, it prints the console log for the switch. However, when I click on the surrounding area (row), it logs the row event in ...

javascriptjqueryjquery-mobile

Issue: The key length and initialization vector length are incorrect when using the AES-256-CBC encryption algorithm

Within my coding project, I have developed two essential functions that utilize the AES-256-CBC encryption and decryption algorithm: import * as crypto from "crypto"; export const encrypt = (text: string, key: string, iv: string) => { con ...

javascriptnode.jstypescriptencryption

Invoke ajax to reset session once user navigates away from page

I am looking for a solution to automatically clear the PHP session array every time a user exits my webpage. However, I need to exclude cases where the user clicks on links with query strings. I attempted using Javascript code, but it did not work as expec ...

phpjavascriptjqueryajaxregex

Implementing a custom loading spinner in Angular 2

One of the tasks I have is to implement a loading spinner whenever my data is still being processed. Here is an example of my service: ... constructor(private _http:Http) { } getDataFromApi() { return this._http.get('https://api.punkapi.c ...

angularangular2-services

Converting a PHP timestamp to a jQuery-compatible format

Can someone help me find the equivalent function in jQuery that will give me a time format similar to this: date( 'Y-m-d\TH:i:sP'); //the output is like this. 2013-10-30T18:10:28+01:00 I am looking for this specific format in jQuery to use ...

javascriptjqueryjson

ensure that mocha does not consistently skip tests

When working with mocha, I include several unit tests that incorporate the skip it.skip('login (return photo)', function(done) { ... At times, I need to prevent skipping certain tests, such as right before a deployment. Is there a specific flag ...

javascriptnode.jsmocha.js

show additional worth on the console

Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...

javascriptjqueryhtmlangularjstypescript

Explanation of JavaScript code snippet

fnTest = /abc/.test(function () { abc; }) ? /\bchild\b/ : /.*/; I am struggling to comprehend the functionality of this particular javascript snippet. Would someone be able to elaborate on the logic behind this code fragment? ...

javascript

Is it possible to verify whether a function contains a call to another function within it?

Consider a scenario in which we have the following nested functions: function function1(n) { function function2() { function function3() { function function4() { return n * 2; } return function4() } return ...

javascript

Error in Uploading Files with AngularJS - Uncaught SyntaxError: Unexpected token

I'm having trouble uploading an image file using Angular and PHP, specifically at the app.service Error line: app.service('fileUpload', ['$https:', function ($https:) { Code app.service('fileUpload', ['$https:&ap ...

javascriptangularjs

evaluation of three variables using short-circuit logic

I was quite surprised by the outcome of the code I wrote. It seemed like it wouldn't work because it was checking if something is not running and the ID matches a specific one, then executing the code regardless of the break size limit: if(!isRunning ...

javascript