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
        })
}
