Read json file outside src folder

Question

my reactjs application have a navigation components that will map over an array of object (required json file)

this json file is required based on user who logged in i.e menu_admin.json, menu_superadmin.json etc

in development build, i'm able to required this file to show the menu. but after I create the reactjs build file (npm run build), and serve it as production build. this production build won't read that file.

note: the jsonfile is outside the src folder, why? because the file is may dynamically changed.

menu_superadmin.json

[
    {
        "menuid": 1,
        "menuname": "home"
    },{
        "menuid": 2,
        "menuname": "item"
    },{
        "menuid": 2,
        "menuname": "setting"
    }
]

menu_admin.json

[
    {
        "menuid": 1,
        "menuname": "home"
    },{
        "menuid": 2,
        "menuname": "item"
    }
]

menu_user.json

[
    {
        "menuid": 1,
        "menuname": home
    }
]

EDIT 6 June, 2019 this is how the code look like

const data = ['admin', 'superadmin', 'user'];
const userrole = 1; /* get this by login */
function menu(data) {
    /* load the json file */
    const menuArray = require(`./../menu/menu_${data[userrole]}.json`) /* file inside this json may dynamically changing depends on the settings */
    /* map the json file */
    const menu = menuArray.map((index) => {
        return <div key={index.menuid} onClick={somethingsomething}>
            {index.menuname}
        </div>
    })
    return menu
}

the expected result is to read menu_superadmin.json
actual result:
- development environment: i'm able to read the menu
- production / build: not able to read the menu

folder structure:

--menu ----menu_admin.json ----menu_superadmin.json --src ----application

EDIT 7 June, 2019
finally found the way to get json file outside the src folder, by move the folder to public folder and then using fetch('/path') instead of require('path'). and create a logic from back-end to make that json file to build folder if its on production environment

Use import to read your JSON and show your code for more clarification. — Gaurav Kandpal, Jun 06 '19 at 04:59
@FamilRestu refer this link to import your JSON https://stackoverflow.com/questions/39686035/import-json-file-in-react — Gaurav Kandpal, Jun 06 '19 at 11:31

score -2 · Answer 1 · answered Jun 06 '19 at 04:58

It looks like you have the json files outside of src directory and hence when you are building locally it is working just because it is built-in the working directory.

Try to get hold of json files into src during build. It is a classic case of build process, even in grade also we see this while creating jar file.

Read json file outside src folder

1 Answers1