I have a problem with the module not being found in React import. Here is my API from the file:

[   
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:48.1535075Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:48.1535075Z",
        "isUnicode": "FALSE",
        "messageUUID": "4889e632-a314-45e2-89fd-35b07b4f9ff2"
    },
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:46.3254032Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:46.3254032Z",
        "isUnicode": "FALSE",
        "messageUUID": "7f48626f-7dfe-4772-99e6-3a4c1df15e0e"
    }
]

And then I'm trying to call it under imports so I can log(data)..

import React from 'react'

import dataJSON from './data.json'
    const getData = async () => {
        const response = await fetch(dataJSON)
        const data = await response;
        return getData
    }

But I can't fetch data coz it isn't getting module I need. How can I fix this?

I have a problem with the module not being found in React import. Here is my API from the file:

[   
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:48.1535075Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:48.1535075Z",
        "isUnicode": "FALSE",
        "messageUUID": "4889e632-a314-45e2-89fd-35b07b4f9ff2"
    },
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:46.3254032Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:46.3254032Z",
        "isUnicode": "FALSE",
        "messageUUID": "7f48626f-7dfe-4772-99e6-3a4c1df15e0e"
    }
]

And then I'm trying to call it under imports so I can log(data)..

import React from 'react'

import dataJSON from './data.json'
    const getData = async () => {
        const response = await fetch(dataJSON)
        const data = await response;
        return getData
    }

But I can't fetch data coz it isn't getting module I need. How can I fix this?

• javascript
• json
• reactjs
• asynchronous
• fetch-api

• What bundler are you using? For example, create-react-app uses webpack + some configurations that should allow you to easily import json – marhaupe Commented Nov 28, 2019 at 16:19
• 1 I don't think you need to use fetch to import a local json file. – Trace Commented Nov 28, 2019 at 16:19
• 2 Possible duplicate of How to import a json file in ecmascript 6? – messerbill Commented Nov 28, 2019 at 16:22
• I'm using webpack from create-react-app... is there some solution to fix config for importing json file... – Slobodan Draksimovic Commented Nov 28, 2019 at 16:22
• @messerbill Tried that solution.. and got err Expected a JSON object, array or literal. – Slobodan Draksimovic Commented Nov 28, 2019 at 16:24

5 Answers 5

If you're using Create React App this should work fine :

import dataJSON from './data.json'

console.log(dataJSON )

You could use axios / Promise based HTTP client for the browser and node.js to handle the request in the React ponentDidMount life-cycle method.

https://github./axios/axios

But I agree that in CreatReactApp is easier to just:

import info from './data.json';

If you are using create-react-app, just import

import dataJson from './dataJson.json';

Please see my sandbox import json in react app

Tnx all for trying to help me, but my solution was putting .json file in public folder, and importing it in App.js... that Way engine didn't trow error and I resolved it with async/await.

For use import and export statements, you have to use es6, and for this, babal is required.

Maybe you have to add babel-plugin-import to your project: read if you have and how to install and configure here here)