using require() string literal not working with expo

[kendreaditya]

const song = require(`app/assets/songs/${uid}.json`); I'm trying to import a json file dynamically with require and it looks like its supported by react native [1] and works with next.js in my app. However, I run into an issue when running it with expo on iOS.

error: ../../packages/app/features/song/song-screen.tsx: ../../packages/app/features/song/song-screen.tsx:Invalid call at line 12: require(`app/assets/songs/${uid}.json`)
Error: ../../packages/app/features/song/song-screen.tsx:Invalid call at line 12: import(`app/assets/songs/${uid}.json`)
    at transformJS (./node_modules/metro-transform-worker/src/index.js:225:15)
    at transformJSWithBabel (./node_modules/metro-transform-worker/src/index.js:343:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (./node_modules/metro-transform-worker/src/index.js:461:12)

[nandorojo]

React native does not allow dynamic string imports the way node does. Neither does frontend in general.

[nandorojo]

Where do you see it’s supported by RN? That issue doesn’t say it is

[nandorojo]

In any case, Solito is just an RN app, so if it works (or doesn’t) with RN, then the same will happen in Solito

[kendreaditya]

Where do you see it’s supported by RN? That issue doesn’t say it is

It turns out I missread the last commit: ZaBursta pushed a commit to ZaBursta/protobuf.js that referenced this issue on May 17, 2018 Only 1 string literal per require …

React native does not allow dynamic string imports the way node does. Neither does frontend in general.

I see, so when it works on my next app, its only working cause its running on the server? Whereas it wouldn't work in normal React or RN?

How could I work around it?

[nandorojo]

What is the use case for this on the frontend for you? You could make a server endpoint that returns JSON if you want, or you’d have to make a list importing all possible files

[kendreaditya]

What is the use case for this on the frontend for you? You could make a server endpoint that returns JSON if you want, or you’d have to make a list importing all possible files

For RN, we would want offline functionality as our data doesn't really change. So the JSON files are bundled with the app.

[nandorojo]

In that case, you can simply import every json file and put them in an array or dictionary with keys and then pick from there

[kendreaditya]

I see, thank you, I appreciate it!