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

I'm experiencing an issue in Angular 2 where I am unable to call a function within another function

I am working with an Angular 2 client and have created an ngOnInit function in the component.ts file. ngOnInit(){ var grid = document.getElementById('devpro'); grid.addEventListener('selected-items-changed', function() ...

angularvaadin

Guide to retriecing a state in Next.js 14

Check out my code below: "useState" // firebase.js import firebase from "firebase/app"; import "firebase/auth"; // Import the authentication module export default async function handler(req, res) { if (req.method !== " ...

javascriptnext.js

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

javascriptjqueryruby-on-railsajax

Navigating JSON data with unexpected fields in Typescript and React.js

Looking to parse a JSON string with random fields in Typescript, without prior knowledge of the field types. I want to convert the JSON string into an object with default field types, such as strings. The current parsing method is: let values = JSON.parse ...

javascriptreactjstypescript

"Utilizing ng-select with ng-model: A Step-by-Step Guide

Currently, I am working on a code that involves using ng-repeat to loop through options. My goal is to utilize ng-select to choose a value based on a specific condition. However, according to the AngularJS documentation: ngSelected does not interact wit ...

javascriptangularjs

The 'else' statement does not seem to function properly with the 'src' attribute

I have been attempting to include alt text in a web page using jQuery with the code below. However, I am only able to get the correct value for the first image. The else if and else conditions do not seem to be working properly as I am unable to add alt ...

javascriptjqueryif-statementsrc

Encountered a mistake while trying to deploy an Angular 2 application on Heroku - received an error message indicating an expected expression but instead got

I am encountering an issue with my Angular 2 app. It runs perfectly fine locally, but when I deploy it on Heroku, I'm getting the following errors: >SyntaxError: expected expression, got '<' ><!DOCTYPE html> >shim.min.js ( ...

node.jsangularheroku

Utilize React Material UI to elegantly envelop your TableRows

Currently, I am faced with a challenge involving a table that utilizes Material UI and React-table. My goal is to wrap text within the TableRow element, but all my attempts have not been successful so far. Is there anyone who knows the best approach to a ...

javascriptreactjsmaterial-uireact-table

Disruptions in typing occur due to errors popping up while utilizing zod and react-hook-forms within a TypeScript application

Currently, I am working on developing a registration page for users using react-hook-forms for the registration form and zod for validation. Initially, when testing the form, I noticed that errors only appeared after submitting the form. However, once the ...

reactjstypescriptvitezod

Issue with Vuex store not being updated when called from promise resolution

I am facing an issue with my Vue.js application where I have an array called items bound to a Vuex data store and exposed as a computed property using the mapGetters helper. In the created() hook of the component, I make a REST API call to update this arra ...

javascriptvue.jspromisevuex

Utilizing Vue to Embed Multiple Hubspot Forms on one Page

While working on a Vue page, I encountered an issue with loading multiple Hubspot forms simultaneously. Only one form would load at a time. Here is the code snippet I used to append a single Hubspot form: mounted() { const script = document.createElem ...

javascriptvue.jsnuxt.js

How to dynamically apply the orderBy filter in AngularJS

Attempting to input ordering criteria from a text box and dynamically order the content. The current code is functioning properly, but when attempting to change: orderBy:'age' to orderBy:'{{criteria}}' the functionality breaks. Her ...

javascriptangularjs

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

javascripthtmlvue.jsnuxt.js

Utilize JavaScript to connect WhatsApp with the website

I am looking to use Javascript to enable opening WhatsApp on both iOS and Android devices. Below is the code I have attempted: window.open("https://wa.me/15551234567"); window.open("https://api.whatsapp.com/send?phone=15551234567"); ...

javascriptwhatsapp

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

Send automatically generated information as a component of a submission

Currently, I am struggling to submit dynamically generated content from a table within my form. The form is being generated using Angular 6, but I am having difficulty representing the dynamic content in the FormGroup declaration. import { Component } fr ...

angularangular-formsangular-formbuilder

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

javascriptreactjs

Make leaflet function operate synchronously

There seems to be an issue with calling the setMarker() function within another function, as the markers are not being set. It's possible that this is due to the asynchronous nature of the setMarker() function because of the Promise it uses. getCities ...

angulartypescriptleafletgeojsonwebdatarocks

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

javascripthtmljqueryajax