SyntaxError: Cannot use import statement outside a module using puppeteer - node.js

Hello I keep trying to run the puppeteer test but keep getting this issue. Please help thanks.enter image description here
code:
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://developers.google.com/web/');
// Type into search box.
await page.type('.devsite-search-field', 'Headless Chrome');
// Wait for suggest overlay to appear and click "show all results".
const allResultsSelector = '.devsite-suggest-all-results';
await page.waitForSelector(allResultsSelector);
await page.click(allResultsSelector);
// Wait for the results page to load and display the results.
const resultsSelector = '.gsc-results .gs-title';
await page.waitForSelector(resultsSelector);
// Extract the results from the page.
const links = await page.evaluate(resultsSelector => {
return [...document.querySelectorAll(resultsSelector)].map(anchor => {
const title = anchor.textContent.split('|')[0].trim();
return `${title} - ${anchor.href}`;
});
}, resultsSelector);
// Print all the files.
console.log(links.join('\n'));
await browser.close();
})();
error:
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:74:18)
at wrapSafe (node:internal/modules/cjs/loader:1128:20)
at Module._compile (node:internal/modules/cjs/loader:1169:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12)
at node:internal/main/run_main_module:23:47
I have tried reinstalling node js and npm but nothing has worked.

{
"name": "my-app",
"version": "0.0.0",
"type": "module",
"scripts": { ...
},
...
}
Add type:module in your package.json file or install the latest Nodejs

Related

Mocha: You need to instantiate using the "new" keyword

I am just exploring mocha and I am facing a strange error. I have a not project and want to write some tests.
I have installed the node
npm install --save-dev mocha
My code is:
const assert = require('assert');
const ganache = require('ganache-cli');
const Web3 = require('web3');
const web3 = Web3(ganache.provider());
class Car{
park(){
return 'stopped!';
}
drive(){
return 'vroom';
}
}
describe('Car', () => {
it('Can be', () => {
const car = new Car();
assert.equal(car.park(), 'stopped!');
})
})
I have also updated the Script element in the package.json
"scripts": {
"test": "mocha"
},
When I run the test using the command:
npm run test
I am getting the following Error:
Error: You need to instantiate using the "new" keyword.
Stack Trace:
> blockchain#1.0.0 test
> mocha
Error: You need to instantiate using the "new" keyword.
at Object.packageInit (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/web3-core/lib/index.js:27:15)
at Web3 (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/web3/lib/index.js:39:10)
at Object.<anonymous> (/Users/username/Blockchain/BlockchainEtherium/blockchain/test/inbox.test.js:5:14)
at Module._compile (node:internal/modules/cjs/loader:1112:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Function.Module._load (node:internal/modules/cjs/loader:834:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at ESMLoader.import (node:internal/modules/esm/loader:409:24)
at importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
at formattedImport (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
at Object.exports.requireOrImport (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/mocha/lib/nodejs/esm-utils.js:38:28)
at Object.exports.loadFilesAsync (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
at singleRun (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/mocha/lib/cli/run-helpers.js:125:3)
at Object.exports.handler (/Users/username/Blockchain/BlockchainEtherium/blockchain/node_modules/mocha/lib/cli/run.js:370:5)
Looking forward to your help.
Thanks
Just instantiate Web3 with the new keyword as the error message suggests.
Change
const web3 = Web3(ganache.provider());
To
const web3 = new Web3(ganache.provider());

await dbRef.set({codeVerifier, state}). SyntaxError: await is only valid in async functions and the top level bodies of modules [duplicate]

This question already has answers here:
await is only valid in async function
(14 answers)
Closed 12 months ago.
I am having the following application that should authorize with twitter and i am using Firestore. I am using nodejs and the problem i am having is when i am using await in onRequest that should return a response and the set the values to a firestore database. Below is my code
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const dbRef = admin.firestore().doc("tokens/demo");
const TwitterApi = require("twitter-api-v2").default;
const twitterClient = new TwitterApi({
clientId: "",
clientSecret: "",
});
const callBackUrl = "http://127.0.0.1:5000/lucembot/us-central1/callback";
exports.auth = functions.https.onRequest((request, response) => {
const {url, codeVerifier, state} = twitterClient.generateOAuth2AuthLink(callBackUrl, {
scope: ["tweet.read", "tweet.write", "users.read", "offline.access"],
});
await dbRef.set({codeVerifier, state});
response.redirect(url);
});
exports.callback = functions.https.onRequest((request, response) => {});
exports.tweet = functions.https.onRequest((request, response) => {});
I am getting below error
await dbRef.set({codeVerifier, state});
^^^^^
SyntaxError: await is only valid in async functions and the top level bodies of modules
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1026:15)
at Module._compile (node:internal/modules/cjs/loader:1061:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
Node.js v17.6.0
The top-level await means that you are trying to use async/await syntax outside the async function. You can run the await statement under the async function.
So, you have to write your:
functions.https.onRequest( (request, response) => {
as
functions.https.onRequest( async (request, response) => {
For more details. check here.
Usually await works on functions that return a promise, not on functions that return the request object and expect you to use callbacks or event listeners to know when things are done.
Usually, I would recommend you to use the request-promise module.
But since request-promise has been deprecated, here are other options that don't depend on the NPM request package. got has been mentioned already, but it depends on 11 other packages.
axios, in contrast, only has 1 dependency (for redirects). Everything else is natively implemented and built on top of the native NodeJS packages.
Here is an example using axios:
const axios = require('axios')
const response = await axios.get(callbackUrl)
const result = response.data
or, as a one-liner in JavaScript
const result = (await axios.get(callbackUrl)).data

How do I Fix a Cannot find module '.functions/handleCommands.js' error?

Upon running my Bot to have it sign-on after installing a command and event handler I got the error
Error: Cannot find module '.functions/handleCommands.js'
Require stack:
C:\Users\levan\Desktop\Discordbot\Bot Templates\2 command handling\src\bot.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at C:\Users\levan\Desktop\Discordbot\Bot Templates\2 command handling\src\bot.js:14:9
at Object.<anonymous> (C:\Users\levan\Desktop\Discordbot\Bot Templates\2 command handling\src\bot.js:19:3)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12) { code:
'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\levan\\Desktop\\Discordbot\\Bot Templates\\2 command handling\\src\\bot.js'
After looking thru the folder functions and the handleCommands.js, I Still cannot figure out what I'm missing or what I might on messed up. I thought that maybe my module.exports was in the wrong place but moving things around did not solve the issue either.
const { Routes } = require('discord-api-types/v9');
const fs = require('fs');
const clientId = 'redacted'; // your bots token
const guildId = 'redacted'; // the server id the bot will be on
module.exports = (clinet) => {
clinet.handleCommands = async (commandFolders, path) =>{
clinet.commandArray = [];
for(folder of commandFolders){
const commandFiles = fs.readdirSync(`${path}/${folder}`).filter(file => file.endsWith('.js'));
for (const file of commandFiles) {
const command = require(`../commands/${folder}/${file}`);
// Set a new item in the Collection
// With the key as the command name and the value as the exported module
client.commands.set(command.data.name, command);
clinet.commandArray.push(command.data.toJSON());
}
}
};
};
const rest = new REST({ version: '9' }).setToken(process.env.token);
(async () => {
try {
console.log('Started refreshing application (/) commands.');
await rest.put(
Routes.applicationGuildCommands(clientId, guildId),
{ body: clinet.commandArray },
);
console.log('Successfully reloaded application (/) commands.');
} catch (error) {
console.error(error);
}
})();
As the error was MODULE_NOT_FOUND I figured that maybe I didn't run all the installs I need to make my bot work. After running thru my npm lists the error persisted.
NPM's Installed
"npm init"
"npm install discord.js"
"npm install dotenv"
"npm install discord.js dotenv"
"npm install #discordjs/rest discord-api-types #discordjs/builders"
My goal is to be the Bot back online and to figure out how to troubleshoot this sort of error in case it comes up again. Any help you can give will be greatly appreciated.
'.functions/handleCommands.js' should have been './functions/handleCommands.js' Caffeine is not a substitute for sleep

createReadStream() throwing RangeError: Maximum call stack size exceeded when uploading file

I am trying to use Apollo Server's Upload scalar to send files to S3 directly. My schema:
const { gql } = require('apollo-server-express')
module.exports = gql`
extend type Mutation {
createPicture(
name: String!
picture: Upload!
): Picture!
}
type Picture {
name: String!
picture: String!
}
`
Resolver:
const { combineResolvers } = require('graphql-resolvers')
const isAuthenticated = require('./auth')
const { uploadPhoto } = require('../services/picture')
module.exports = {
Mutation: {
createPicture: combineResolvers(
isAuthenticated,
async (
parent,
{ name, picture = null },
{ models, me }
) => {
const { createReadStream, filename, mimetype, encoding } = await picture
// Does not get past this line
const stream = createReadStream()
uploadPhoto(stream, filename)
const pictureModel = models.Picture.create({
name,
picture
})
return pictureModel
}
)
}
}
But my code errors like this:
internal/util.js:55
function deprecated(...args) {
^
RangeError: Maximum call stack size exceeded
at ReadStream.deprecated [as open] (internal/util.js:55:22)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
at _openReadFs (internal/fs/streams.js:123:12)
at ReadStream.<anonymous> (internal/fs/streams.js:116:3)
at ReadStream.deprecated [as open] (internal/util.js:70:15)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
at _openReadFs (internal/fs/streams.js:123:12)
at ReadStream.<anonymous> (internal/fs/streams.js:116:3)
at ReadStream.deprecated [as open] (internal/util.js:70:15)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
at _openReadFs (internal/fs/streams.js:123:12)
at ReadStream.<anonymous> (internal/fs/streams.js:116:3)
at ReadStream.deprecated [as open] (internal/util.js:70:15)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
at _openReadFs (internal/fs/streams.js:123:12)
at ReadStream.<anonymous> (internal/fs/streams.js:116:3)
at ReadStream.deprecated [as open] (internal/util.js:70:15)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
at _openReadFs (internal/fs/streams.js:123:12)
at ReadStream.<anonymous> (internal/fs/streams.js:116:3)
at ReadStream.deprecated [as open] (internal/util.js:70:15)
at ReadStream.open ([truncated]/node_modules/fs-capacitor/lib/index.js:90:11)
Note: I am sure the image was sent correctly, as filename is correct
Turns out it was this bug in graphql-upload. Downgraded to node 12 and it's fixed (solution listed there did not help me)
Add this to package.json:
"resolutions": {
"**/**/fs-capacitor":"^6.2.0",
"**/graphql-upload": "^11.0.0"
}
source: https://github.com/jaydenseric/graphql-upload/issues/170#issuecomment-641938198
This error occured to me in node version 14 too!
I solved it as follows:
Install latest version of graphql-upload !
use graphqlUploadExpress middleware to define the maximum file limit.
import { graphqlUploadExpress } from "graphql-upload";
const app = express()
app.use(graphqlUploadExpress({ maxFileSize: 1000000000, maxFiles: 10 }));
Set uploads to false while initializing the ApolloServer
const server = new ApolloServer({
uploads: false,
schema,
});
Since it is a bug with fs-capacitor, this would help as we can see in this issue
Worked for me in node 14.16.1 with the following configuration:
"resolutions": {
"fs-capacitor": "^6.2.0",
"graphql-upload": "^11.0.0"
}
I needed to add force-resolutions inside "scripts"
"scripts": {
....
"preinstall": "npx npm-force-resolutions"
}
Remove ./node_modules and install dependencies again with npm install.
Add this to your package.json
"resolutions": {
"graphql-upload": "^11.0.0"
}
then add this inside scripts
"scripts": {
....
"preinstall": "npx npm-force-resolutions", //This one
....
}
then you need to do npm install. Done
Source: graphql-upload
I've read the graphql-upload documentation but couldn't find one solid example that shows how to use graph-upload with apollo-server on NodeJS 14.
Based on a sample application (that worked on the old graphql-upload version of apollo-server, failed on NodeJS 14) and answers from stack overflow I've managed to create a fully function example.
The original example: https://github.com/DNature/apollo-upload
I used apollo-server-express, instead of apollo-server.
With NodeJS 14, graphql-upload#12.0.0 and apollo-server-express#2.25.1:
index.js
import { ApolloServer } from "apollo-server-express";
import express from "express";
import { graphqlUploadExpress } from "graphql-upload";
import typeDefs from "./typeDefs";
import resolvers from "./resolvers";
// Import your database configuration
import connect from "./db";
export default (async function () {
try {
await connect.then(() => {
console.log("Connected 🚀 To MongoDB Successfully");
});
const server = new ApolloServer({
uploads: false, // Disables the bundled ApolloServer old graphql-upload that doesn't work on NodeJS 14
typeDefs,
resolvers,
});
await server.start();
const app = express();
app.use(graphqlUploadExpress({ maxFileSize: 1000000000, maxFiles: 10 }));
server.applyMiddleware({ app });
await new Promise((resolve) => app.listen({ port: 7000 }, resolve));
console.log(
`🚀 Server ready at http://localhost:7000${server.graphqlPath}`
);
} catch (err) {
console.error(err);
}
})();
In typeDefs.gql the scalar Upload needs to be defined:
import { gql } from "apollo-server-express";
export default gql`
scalar Upload
type File {
id: ID!
...
In resolvers.js the resolver for Upload needs to be defined:
...
import { GraphQLUpload } from 'graphql-upload';
...
export default {
Upload: GraphQLUpload,
Query: {
hello: () => "Hello world"
},
Mutation: {
...
Finally uploading from postman:
Note: the key 0 is of type File, not Text!
TLDR: Default Apollo server file upload doesn't work in node >=13. Fix it by overwriting Apollo's server file upload with the graphql-upload server file upload
npm install graphql-upload
Overwrite default Apollo Upload type in TypeDefs
const typeDefs = gql`
scalar Upload
...
`
Overwrite default Apollo Upload type in index.js
const { GraphQLUpload } = require('graphql-upload')
const { graphqlUploadExpress } = require('graphql-upload')
const express = require('express')
const app = express()
app.use(graphqlUploadExpress({
maxFileSize: 10000000,
maxFiles: 10
}))
const server = new ApolloServer({
typeDefs,
resolvers: {
Upload: GraphQLUpload,
...resolvers
}
uploads: false
...
})
server.applyMiddleware({
app
})
I've been dealing with this problem multiple times
the problem is old graphql-upload more accurately version 8 uses of node open stream function which is deprecated and no longer available in 13.x and older node versions.
so the solution is you can either use nvm to set your node version to 12 or use resolutions in your package.json file.
first solution(in your favorite terminal):
nvm install 12; nvm use 12
second solution(in package.json):
"resolutions": {
"**/**/fs-capacitor":"^6.2.0",
"**/graphql-upload": "^11.0.0"
}
also this is a problem I've been dealing with for months and apollo team really doesn't like updating their dependencies I think.
Using:
"apollo-server": "^2.18.2",
"apollo-server-express": "2.18.2",
"aws-sdk": "^2.771.0",
"express-fileupload": "^1.2.0",
"graphql": "^15.3.0",
"graphql-upload": "^11.0.0",
"fs-capacitor": "^6.2.0",
I solve this by installing the latest fs-capacitor as a dependency
yarn add fs-capacitor

Running Puppeteer with xfvb headless : false

I am running Puppeteer in a headless Ubuntu 16.04 AWS EC2 instance and would like to run it with a virtual display through xfvb. whenever I try to run it I continue to get the error:
/home/ubuntu/node_modules/xvfb/index.js:84
throw new Error('Could not start Xvfb.');
Error: Could not start Xvfb.
at Xvfb.startSync (/home/ubuntu/node_modules/xvfb/index.js:84:17)
at Object.<anonymous> (/home/ubuntu/puppeteer-works.js:39:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
My code is below:
const puppeteer = require('puppeteer');
const fs = require("fs");
const Xvfb = require('xvfb');
var xvfb = new Xvfb();
var text = fs.readFileSync("proxy.txt").toString('utf-8');
const textByLine = text.split(" ");
const preparePageForTests = async (page) => {
const userAgent = 'Mozilla/5.0 (X11; Linux x86_64)' +
'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39
Safari/537.36';
await page.setUserAgent(userAgent);
await page.evaluateOnNewDocument(() => {
Object.defineProperty(navigator, 'webdriver', {
get: () => false,
});
});
await page.evaluateOnNewDocument(() => {
window.chrome = {
runtime: {},
};
});
await page.evaluateOnNewDocument(() => {
const originalQuery = window.navigator.permissions.query;
return window.navigator.permissions.query = (parameters) => (
parameters.name === 'notifications' ?
Promise.resolve({ state: Notification.permission }) :
originalQuery(parameters)
);
});
await page.evaluateOnNewDocument(() => {
Object.defineProperty(navigator, 'plugins', {
get: () => [1, 2, 3, 4, 5],
});
});
}
xvfb.startSync();
(async () => {
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--proxy-server='+textByLine[0]],
headless: true, });
const page = await browser.newPage();
page.authenticate({
username: textByLine[1],
password: textByLine[2]
});
await preparePageForTests(page);
const testUrl ="https://publicindex.sccourts.org/abbeville/publicindex/";
await page.goto(testUrl);
const html = await page.content();
await page.screenshot({path: 'result.png'});
await browser.close()
console.log(html)
})();
xvfb.stopSync();
I appreciate any help, am pretty new to node.js so I apologize in advance for any format errors. I am not being allowed to post this due to it being mainly code, so I am adding this extra sentence.
You seem to be trying to use the Xvfb node module. While the other answers definitely work, here's a snippet that works fully within nodejs
const puppeteer = require('puppeteer')
const Xvfb = require('xvfb');
(async () => {
var xvfb = new Xvfb({
silent: true,
xvfb_args: ["-screen", "0", '1280x720x24', "-ac"],
});
xvfb.start((err)=>{if (err) console.error(err)})
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null, //otherwise it defaults to 800x600
args: ['--no-sandbox', '--start-fullscreen', '--display='+xvfb._display]
});
const page = await browser.newPage();
await page.goto(`https://wikipedia.org`,{waitUntil: 'networkidle2'});
await page.screenshot({path: 'result.png'});
await browser.close()
xvfb.stop();
})()
This isn't perfect in terms of handling errors (and possible race conditions) in xvfb.start(), but it should get you started, and it works pretty consistently for me.
Edit: Remember to install Xvfb first: sudo apt-get install xvfb (Thanks, #iamfrank)
it's seem th xfvb not install properly
you should Install xvfb (the X windows virtual framebuffer) packages for ubuntu OS
$ sudo apt-get update
$ sudo apt-get install xvfb
Run Xvfb in the background and specify a display number (10 in my example)
$ Xvfb :10 -ac &
Set the DISPLAY variable to the number you chose
$ export DISPLAY=:10
If other required packages and xvfb are properly installed, then run the following command.
xvfb-run -a --server-args="-screen 0 1280x800x24 -ac -nolisten tcp -dpi 96 +extension RANDR" command-that-runs-chrome
Cheers!!!

Resources