Description
Environment
Environment:
OS: Windows 10
Node: 10.8.0
Yarn: 1.3.2
npm: 6.2.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ~0.55.2 => 0.55.4
Description
Hey everyone!
Firstly, thanks for spending the time to open this and read this. So!
I need to point out that i've just started react native 4 weeks ago from react web development.
Basically i'm making an app where i need to import a pretty big JSON file called 'cityData.json' with the size of around 23.8MB.
and one element of the JSON array looks like this...
{ "id": 707860, "name": "Hurzuf", "country": "UA", "coord": { "lon": 34.283333, "lat": 44.549999 } },
and there are plenty of these elements.
And whenever i run the code using react-native run-android, i get a memory issue from the bundler.
Heres a screenshot of what it looks like...
I spent around 3 hours searching why this was happening, and alot of people suggested something about how something shouldn't be transpiled? Something about transforming? Sorry like i said i'm a newbie. They then recommended that i "ignore": the bundle from interacting with my JSON file using .babelrc or package.json? I'm not exactly sure about what they mean about that. I don't get the **/*.js syntax. But i do know for a fact, that whenever i pass in smaller JSON files, it loads perfectly. It's just this JSON file that's wayyy to big! That progress bar just won't move...
As you can see after reading that paragraph, i'm really bad with anything to do with babel and bundles. So hopefully, you guys (who are much more experienced than me) can help me with this!
Reproducible Demo
To reproduce this,
download a JSON file with the size of 23MB
create create-react-native-app
do npm run eject
make a folder named dataFolder
move JSON file called (cityData.json) into dataFolder
in App.js add the following code:
const cityData = require('./dataFolder/cityData.json');
Then run the app with react-native run-android
Then the error will occur.