Troubleshooting Puppeteer compatibility issues when using TypeScript and esModuleInterop

When attempting to use puppeteer with TypeScript and setting esModuleInterop=true in tsconfig.json, an error occurs stating

puppeteer.launch is not a function

If I try to import puppeteer using

import * as puppeteer from "puppeteer"

My question is: Is this the intended behavior or a bug?

It's easy for me to resolve by simply setting esModuleInterop to false, but it does seem strange.

In addition:

If I manually change puppeteer.launch() to puppeteer.default.launch() in index.js, it works.

Links:

tsconfig.json: https://pastebin.com/6xvkfJg2

package.json: https://pastebin.com/ViwfMwyQ

index.ts: https://pastebin.com/GtHuiHSJ

index.js: https://pastebin.com/TzeCDiGn

javascripttypescriptpuppeteertsc

Answer №1

To use the syntax 

import puppeteer from 'puppeteer'
, or to remove the esModuleInterop flag, are your options.

In the early days of TypeScript's development, the ECMAScript modules specification was still in progress. Back then, TypeScript took a slightly different approach and included features that were not compatible with ES. One such feature is the module syntax.

import * as smth from 'smth' is valid TypeScript code but not valid ECMAScript code.
import smth from 'smth' is valid ECMAScript code but not a valid TypeScript construct.

The esModuleInterop flag essentially means "we will be using ECMAScript imports in our code".
Nowadays, with the widespread adoption and popularity of ES module syntax, this flag can be considered the standard.

For a more in-depth look at this topic, check out this article

Answer №2

Check out this solution:

import { init } from 'puppeteer';

Once you have that, simply execute the following code:

const tab = await init();

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

Using ngModel instead of value to bind a custom Angular directive for currency input

Currently, I am using a specialized mat-input-currency format directive to automatically convert my field inputs into currency. You can find the npm repository here. However, the directive binds the element data to [value] of the input, and I require it t ...

javascriptangulartypescriptangular-materialangular-ngmodel

Using Firebase callable functions with React Native

Can I use Firebase callable functions with React Native? I have successfully deployed an onCall function and it is visible in my dashboard. I have initialized the functions using: // Initialize Cloud Functions through Firebase firebase.functions(); The ...

javascriptfirebasereact-nativegoogle-cloud-functions

Using regular expressions to enable scientific notation in a numeric text field

I'm looking to create a validation system for numbers with scientific notation (using 'e', '+', '-', '.') using regex. I've tried some expressions but they are not working as expected. For Regular Numbers: ...

javascriptreactjsmaterial-ui

How can you deactivate all form elements in HTML except for the Submit button?

Is there a method available to automatically deactivate all form elements except the submit button as soon as the form loads? This would entail pre-loading data from the backend onto a JSP page while restricting user access for editing. Users will only be ...

javascriptjqueryhtmljsp

What factors contribute to the variations in results reported by Eslint on different machines?

We initially utilized tslint in our project but recently made the switch to eslint. When I execute the command "eslint \"packages/**/*.{ts,tsx}\"" on my personal Windows machine, it detects 1 error and 409 warnings. Surprising ...

reactjstypescripteslinttslint

Insert multiple text box values as a new entry in an SQL database

Currently, I am implementing a code snippet to incorporate additional text boxes within a form. The main purpose is to enable users to input multiple languages they are proficient in. <script> jQuery(function($) { var i = 0; ...

javascriptphpjquerysqlajax

What is the process for including an "everything" alternative on a dropdown menu?

Need assistance with my dropdown component that filters a list based on 'state' data. Below is the HTML code for the dropdown: <section class="select-wrapper {{wrapperClass}}" [ngClass]="{'expanded': toggle}" (click)="toggleSelect($ ...

javascripttypescriptdrop-down-menuangular7dropdown

Leverage the template pattern in React and react-hook-form to access a parent form property efficiently

In an effort to increase reusability, I developed a base generic form component that could be utilized in other child form components. The setup involves two main files: BaseForm.tsx import { useForm, FormProvider } from "react-hook-form" expor ...

reactjstypescriptreact-hook-form

What is the best method for initializing the value of ng-model as an empty string in AngularJS?

I need help setting the initial value for an attribute in my model. Here's the code I'm using: <input type="text" ng-model="selectedModel.title" name="title" value="" > What I want is for the attribute value to be initially set as an empt ...

javascriptangularjsangular-ngmodel

Error encountered while trying to call callback functions

I encountered an error in my code, but I managed to resolve it independently. Could someone please provide an explanation of why the code wasn't working and delve into the mechanics behind the issue? Here is the code snippet: var listTables = functi ...

javascriptajaxxmlhttprequestonreadystatechange

The Angular translation function is being called repeatedly without end

I have a function that performs text translation. It is hooked to all the text elements and appears as follows: $rootScope.translateText = function (key) { if (angular.isDefined(Language.dictionary[key])) { return Language.dictionary[key]; } ret ...

javascriptangularjsloopsdata-bindinginfinite

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

invoke the modal function from a separate React file

I am currently studying react and nextjs. I am experimenting with calling a modal from another file but unfortunately it's not functioning as expected. Here is the code I used: Signin.js import { Modal } from "react-bootstrap"; import { u ...

javascriptreactjsnext.js

Strategies for managing rate-limited API services in React/Node.js: Handling ReferenceErrors

Hey there! I'm new to the world of React and NodeJS, and right now I'm navigating my way through dealing with a rate-limited API service. My plan is to have NodeJS fetch data from this API every half an hour, then send it to my "/youtube" endpoin ...

javascriptnode.jsexpressaxios

The function of jQuery .click() not triggering on elements within msDropDown

I'm having difficulty implementing jQuery on an Adobe Business Catalyst site. The HTML snippet below shows the structure: <div class="banner-main"> <div class="banner-top"> <section class="banner"> <div class="catProd ...

javascriptjqueryhtmlbusiness-catalystmsdropdown

Confirm the data in each field of a form individually

I am facing an issue with a form that contains 7 fields. When I submit the form to the "register.php" page, it processes each field one by one and outputs the result as a whole. However, I need to validate the data using ajax, collect the output one by one ...

javascriptphpajaxhtmlforms

Trouble with Vue 3 watch not persisting after page refresh

Attempting to create a Vue application that supports two languages, utilizing local storage and store to store the selected language. Initially, everything appears to be functioning correctly. After the user logs in, the default language is displayed in b ...

javascriptvue.jswatch

extracting data from json using javascript

Here is the data in JSON format var testData = {text: '{"status":200}'}; I am attempting to extract the status using this code: console.log(testData.text.status); However, it returns undefined Could you please provide guidance on how to succ ...

javascriptjson

Advantages of creating model classes in Angular 2 and above

When developing a service for my domain, I discovered that I could easily implement the service using any type like this: list(): Observable<any> { const url = this.appUrlApi + this.serviceUrlApi; return this.http.get(url, { headers: this.he ...

angulartypescript

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

Before running my selenium scripts, I am attempting to store an item in the browser's localStorage. I attempted to clear the local storage using this command: driver.get('javascript:localStorage.clear();') This successfully cleared the lo ...

javascriptrubyhtmlselenium-webdriver