My problem is that when I try to run my code using require('puppeteer') then I get an error 'Uncaught ReferenceError: require is not defined at app.js:1:19'
HTML
<body>
<form action="">
<input type="url" name="" id="image_input">
<button id="image_downloader">Search</button>
</form>
<section id="image">
</section>
<script src="app.js"></script>
</body>
JS
const puppetter = require('puppeteer');
const image_input = document.querySelector('#image_input');
const image_downloader = document.querySelector('#image_downloader');
const section_image = document.querySelector('#image');
let image_link_value;
image_downloader.addEventListener('click',(e)=>{
e.preventDefault();
image_link_value = image_input.value;
const createImage = document.createElement('img');
section_image.append(createImage);
createImage.setAttribute('src',`${image_link_value}`);
puppetter_call();
})
function puppetter_call(){
const openBrowser = puppetter.launch({headless:false});
let page;
openBrowser
.then(function(browser){
const pageArrPromise = browser.pages();
return pageArrPromise;
})
.then(function(browserPage){
page = browserPage[0];
let gotoPromise = page.goto(`${image_link_value}`);
return gotoPromise
})
}