React how use data outside src

Question

Hey, how can i use data.json in App.js. I would like to map this data in App.js, but it must be located in another folder - outside src.

Relative imports outside of src/ are not supported.

There is a special limitation of `create-react-app`. It is implemented in _ModuleScopePlugin_ to guarantee that files are located in **src/**. This plugin insures the relative imports of the application's source directory do not reach outside of it. _Note_: Do not import from **public** folder that will be duplicated in the **build** folder which ultimately increase the size of the package download. — Ala Hamadi, Aug 06 '21 at 16:03

score 0 · Answer 1 · answered Aug 06 '21 at 15:16

Add the json data to a js file and then export it. Then import it from the file and use it.

Sample:

import React from 'react';

export const filterData = [
    {
        value: 'popularity.desc',
        title: 'Popularity Desc'
    },
    {
        value: 'popularity.asc',
        title: 'Popularity asc'
    },
    {
        value: 'release_date.desc',
        title: 'Release-Date Desc'
    },
    {
        value: 'release_date.asc',
        title: 'Release-Date Asc'
    },
    {
        value: 'revenue.desc',
        title: 'Revenue Desc'
    },
    {
        value: 'revenue.asc',
        title: 'Revenue Asc'
    },
    {
        value: 'original_title.desc',
        title: 'Original-Title Desc'
    },
    {
        value: 'original_title.asc',
        title: 'Original-Title Asc'
    },
    {
        value: 'vote_average.desc',
        title: 'Average-Vote Desc'
    },
    {
        value: 'vote_average.asc',
        title: 'Average-Vote Asc'
    },
    {
        value: 'vote_count.desc',
        title: 'Average-Count Desc'
    },
    {
        value: 'vote_count.asc',
        title: 'Average-Count Asc'
    }
]

hey, thanks for the answer but i can't import it "Relative imports outside of src/ are not supported." — KzQ, Aug 06 '21 at 15:35
Then just do what it says. move the json data to the SRC folder. You can bypass with eject though but I don't recommend it. Check this post. https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory — ND-BEAST, Aug 06 '21 at 15:59

React how use data outside src

1 Answers1