Recently, I started a fresh angular project with the goal of scraping data from a website and displaying it on my page. To achieve this, I thought of simply installing puppeteer via NPM after creating a new project. However, the compiler threw various errors post the puppeteer installation.
After setting up angular using ng new and adding puppeteer with NPM, running the code resulted in the following errors:
ERROR in node_modules/puppeteer/lib/types.d.ts(6,13): error TS1005: '=' expected.
node_modules/puppeteer/lib/types.d.ts(6,31): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,46): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,59): error TS1011: An element access expression should take an argument.
Specifically, the issues seem to revolve around these two lines of code in puppeteer:
import type { Readable } from 'stream';
//... and...
export declare type JSONArray = readonly Serializable[];
I am using nodejs version v16.13.2. Initially, I upgraded typescript to version 4.6.2 and also attempted upgrading @types/node due to previous errors. However, upgrading @types/node to the latest version only led to further complications.
ERROR in node_modules/@types/node/assert.d.ts(12,72): error TS1144: '{' or ';' expected.
...
So, for now, I have reverted back to version 12.0.2 to solely focus on the puppeteer-related issues.
Here's a glimpse of my current package.json:
{
// Package.json details here
}
On a second attempt, running on a newer version of angular (13) and CLI produced a different set of errors:
// Errors related to modules not found or missing
In an effort to resolve these errors, I made adjustments to my package.json with:
"browser": {
"fs": false,
"path": false,
"os": false
}
I also attempted installing path and stream via NPM but to no avail. While puppeteer integration worked fine in a small JavaScript project previously, it seems to be posing challenges when incorporated into an angular setup.