Uncaught ReferenceError: require is not defined in browser

Question

when i run the js file where this function is written it works and show data in the console. but when i run it in a browser from the html file with onclick i get the error: Uncaught ReferenceError: require is not defined i tried using the function in tag but didn't work

function appendData() {
  const data = require("../assets/Data/Courses.json");
    
  var length = Object.keys(data.employees).length;
    var Text = new Array();
    for(let i = 0; i < length; i++) 
    {
        //document.getElementById('test').innerHTML += "<br>"+data.employees[i].firstName + " " + data.employees[i].lastName ;
        Text[i] = data.employees[i].firstName+ " " + data.employees[i].lastName ;
        console.log(Text[i]);
    } 
}

you can find your answer here https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined — Tarek Salah, May 08 '22 at 01:01
@TarekSalah For next time, note that you can [flag](https://stackoverflow.com/help/privileges/flag-posts) as duplicate. — SuperStormer, May 08 '22 at 01:27

score 1 · Answer 1 · answered May 08 '22 at 01:30

require() is actually Node style of importing code. So it won't work in this case. I don't know your setup but if you are using vanilla JS (without babel setup), you can include .json files to your code by using the fetch API

fetch("../assets/Data/Courses.json")
  .then(response => { 
      const data = response.json();
      var length = Object.keys(data.employees).length;
    var Text = new Array();
    for(let i = 0; i < length; i++) 
    {
        //document.getElementById('test').innerHTML += "<br>"+data.employees[i].firstName + " " + data.employees[i].lastName ;
        Text[i] = data.employees[i].firstName+ " " + data.employees[i].lastName ;
        console.log(Text[i]);
    } 
    })
  .then(data => console.log(data))
  .catch(error => console.log(error));

Uncaught ReferenceError: require is not defined in browser

1 Answers1