I've started a new angular project where I want to scrape some data from a website and redisplay it on my page. I expected to start a new project and just NPM install puppeteer to be up and running but the compiler is throwing multiple errors after I installed puppeteer.
I've installed angular with ng new and added puppeteer with NPM, but when I run the code I'm getting 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.
these issues are specifically these two lines of code in puppeteer:
import type { Readable } from 'stream';
//... and...
export declare type JSONArray = readonly Serializable[];
I'm using nodejs version v16.13.2, I've upgraded typescript to version 4.6.2 and tried upgrading @types/node because it was throwing errors before. If I upgrade @types/node to the latest my error list upgrades to even more issues
ERROR in node_modules/@types/node/assert.d.ts(12,72): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(229,72): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(400,98): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(400,105): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(400,108): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(432,102): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(432,109): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(432,112): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(734,51): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(734,57): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(734,60): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(892,65): error TS1005: ';' expected.
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.
So I've rolled back to version 12.0.2 where I only get the puppeteer issues.
My current package.json is:
{
"name": "ciaw-scrapper",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"puppeteer": "^13.5.0",
"rxjs": "~6.3.3",
"sass": "^1.49.9",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.4",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.0.2",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
When I run on a newer version of angular (13) and CLI ,as a second attempt, I get a whole different set of errors:
./node_modules/puppeteer/node_modules/ws/lib/buffer-util.js:103:21-42 - Warning: Module not found: Error: Can't resolve 'bufferutil' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\puppeteer\node_modules\ws\lib'
./node_modules/puppeteer/node_modules/ws/lib/validation.js:109:22-47 - Warning: Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\puppeteer\node_modules\ws\lib'
./node_modules/fs-constants/browser.js:1:0-37 - Error: Module not found: Error: Can't resolve 'constants' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\fs-constants'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
- install 'constants-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "constants": false }
./node_modules/glob/glob.js:49:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\glob'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
........ (this continues on like this
I've tried adding following to the package.json to fix these, but this didn't fix it:
"browser": {
"fs": false,
"path": false,
"os": false
}
I've also tried adding path and stream through NPM.
I tried puppeteer before in a small javascript project and had everything up and running, but adding it on top of angular has not worked so far.
CodePudding user response：
Puppeteer is a node.js library - it doesn't work as-is in browser.
There was additional documentation here doc, seems to have expired.