nandorojo / solito

🧍‍♂️ React Native + Next.js, unified.

Home Page:https://solito.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

using require() string literal not working with expo

kendreaditya opened this issue · comments

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)

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

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

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

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?

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

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.

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

I see, thank you, I appreciate it!