require() not working with variable - react native

Question

I meet a weird problem. If I set a variable direclty with a value like this "const myString = 'someWord';" that work but if I take the value from a variable like this "const myString = someVariable;", that doesn't work, and if I set the value on a conditional block that doesn't work too.

So, work:

    var jsonName = 'tramwayen';
    const pathex = require('../assets/JSON/' + jsonName);
    var json = JSON.parse(JSON.stringify(pathex));

doesn't work:

    var jsonName = variable;
    const pathex = require('../assets/JSON/' + jsonName);
    var json = JSON.parse(JSON.stringify(pathex));

doesn't work:

    var jsonName = '';
    if (condition) {
       jsonName = 'tramwayen';
    }
    const pathex = require('../assets/JSON/' + jsonName);
    var json = JSON.parse(JSON.stringify(pathex));

I really don't understand.

I have this error : "Invalid call at line 41: require('../assets/JSON/' + jsonName2)"

It's jsonName, I just have other name on my real code – jolearn Apr 25 '19 at 15:40 — jolearn, Apr 25 '19 at 15:40

score 7 · Answer 1 · answered Apr 25 '19 at 14:50

7

Most JS bundlers cannot handle dynamic require imports. You might want to load all of the files, and put them in an object:

let data = {
    tramwayen: require('../assets/JSON/tramwayen.json'),
    something: require('../assets/JSON/something.json'),
    // and so on
};

And use the data object to retrieve the data you need.

answered Apr 25 '19 at 14:50

Tim VN

1,183
1
7
19

I'm already trying to take the whole json, the file is named tramwayen.json, but the extension .json is not necessary. If I put it on, it crashes. – jolearn Apr 25 '19 at 15:50

score 0 · Answer 2 · answered Apr 26 '19 at 08:52

From what I read while doing some research, it seems impossible to made a require dynamically. In react native require should be static. But there are some solutions to avoid this issue.

Here is mine, I put all data of my differents Json on one single json, and I dynamically choice wich part of the data I want to get.

I can also, put all the static require on an object, and choose dynamicaly wich require I want to get.

solution 1:

    const id = window.currentPI;
    const json = require('../assets/JSON/mainData.json');
    const nbreOfPix = json[`${id}`].preData.numberOfPictures;

solution 2:

const IMAGES = {
    tramwayen: require('../assets/CtrlPI/PHOTO_articles/008_02_Img.png'),
    tramwayen2: require('../assets/CtrlPI/PHOTO_articles/HC002_04_Img.png')
};

getImage = (name) => {
    return IMAGES[name];
};

require() not working with variable - react native

2 Answers2

Linked