Loading local json file with require?

Question

I've been googling for hours now, thought I just ask here. For some reason my 'require()' does not work. The recuirejs is included and as far as I can see my return value should be my data in the exact same order as my json file.

here is my code:

$(document).ready(async function() {
  let data = await fetchData('./data/file.json');
  console.log(data);
}
// fetch and return data
function fetchData(path) {
  return require([path]);
}

I originally had this solution (which worked with a local host but I need it without a host):

function fetchData(path) {
  return fetch(path).then(response => {
    return response.json().then((data) => {
      return data;
    }).catch((err) => {
      console.log(err);
    })
  });
}

It gives me several script errors and MIME type mismatches plus it logs this instead of my data:

s(e, t, i)
   arguments: null
   caller: null
  >defined: function defined(e)
   isBrowser: true
   length: 3
   name: "s"
  >prototype: Object { … }
  >specified: function specified(e)
  >toUrl: function toUrl(e)
  >undef: undef(i)

I don't know what else I should try.

Thank you!

if it's just a JSON File, you can load it with [fs.readFile](https://nodejs.dev/learn/reading-files-with-nodejs) and parse it with [JSON.parse](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) — Scriptkiddy1337, Mar 01 '21 at 13:49
@RenéDatenschutz — the Node.js `fs` module is not available in browsers — Quentin, Mar 01 '21 at 13:55

score 1 · Accepted Answer · answered Mar 01 '21 at 13:57

RequireJS is not compatible with Node.js's require method. It is designed for AMD modules not CommonJS modules and it does not support the loading of plain JSON files. This is why your first attempt does not work.

Your second attempt does not work because file systems requests are treated as cross-origin requests.

The only way to load a JSON file when working on the load filesystem is to have the user select it with an <input type="file"> and then read it with JavaScript.

If you want to read hard-coded JSON then you might consider baking it into your app. The simple way to do that would be to just paste it in as a JS object literal. More complex programs might benefit from using a tool like Webpack (which would need a JSON loader) and pulling it into the JS at build-time rather than development time (the aforementioned pasting approach) or run time (which is impossible as mentioned in previous paragraphs).

score -1 · Answer 2 · answered Mar 01 '21 at 14:10

You have two options:

Use a tool like Webpack to put all your frontend files into the bundle
Download JSON file from web server:

I assume you are using jQuery already, so:

$.get('https://petstore.swagger.io/v2/swagger.json').then(function(data) {
  console.log(data.swagger);
});

In this case you have to make your json file available for webserver

$.get('/dist/data/file.json').then(function(data) {
  console.log(data);
});

Loading local json file with require?

2 Answers2