CODEWITHSUNDEEP
react-native
John Scalo
John Scalo

Reputation: 3401

Always "requiring unknown module" when reading json file

bit of an RN newb here. I'm trying to read some json data files:

function loadCategories() {
  const ids = ['tl1', 'tl2', 'tl3', 'tl4', 'tl5', 'tl6'];
  ids.forEach(function(id) {
    var contents = require('../Content/top-level/' + id + ".json.js");
    ...
  });
}

But here I always get an error:

Unhandled JS Exception: Requiring unknown module "../Content/top-level/tl1.json.js".If you are sure the module is there, try restarting the packager or running "npm install".

The files exist and my relative path logic should be OK given the project structure:

ProjectDir
  Components
    ThisComponent.js
  Content
    top-level
      tl1.json.js
      tl2.json.js
      ...

i.e. the above code is running from ThisComponent.js and trying to access tl1.json.js, etc so I would think the relative path of ../Content/top-level/tl1.json.js would work.

I've tried:

I'm on RN 0.36.0. Gotta be something obvious…right?

Upvotes: 1

Views: 1085

Answers (1)

vinayr
vinayr

Reputation: 11234

This isn't possible in React Native because of how the packager works. You have to require files with static string path. You can use a switch statement something like this - 

switch (id) {
  case 'tl1': return require('../Content/top-level/tl1.json');
  case 'tl2': return require('../Content/top-level/tl2.json');
  ...
}

Also why does your json files have .js extension?

Upvotes: 5

Related Questions