4

I have a ipAddress.json file that has the contents:

{
  "ipAddress": "11.111.111.111"
}

In the public folder i put that ipAddress.json file into an "ipAddress" folder so the path looks like "public/ipAddress/ipAddress.json"

But I cannot read this file. I am trying

const ipAddress = (require(process.env.PUBLIC_URL + '/ipAddress/ipAddress.json')).ipAddress;

using "json-loader" common library.

How do I get this to work? According to (Using the Public Folder) it should work just fine.

But I get this error:

Module not found: You attempted to import /ipAddress/ipAddress.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Thank you for any help

Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
user1189352
  • 3,628
  • 12
  • 50
  • 90
  • The error literally states what the problem is. Your only workaround might be placing the file inside the src folder – Rohit Kashyap Aug 21 '19 at 18:43
  • Alternative: https://stackoverflow.com/a/55298684/8076386 – Rohit Kashyap Aug 21 '19 at 18:45
  • when I build the project I need to be able to edit that ipAddress.json file which is why I want to put it in the public folder but if I put it into the src folder when I build u cannot access that file – user1189352 Aug 21 '19 at 18:46
  • ok will look at that link thank you – user1189352 Aug 21 '19 at 18:47
  • Read the first answer, there's a reason why it is avoided. Especially to avoid build issues – Rohit Kashyap Aug 21 '19 at 18:48
  • @RohitKashyap unfortunately none of that is working. I already ejected the react-create-app but none of this is telling me how to read from an external file unfortunately. unless i'm missing something your'e trying to tell me.. putting the file into the src folder won't work for me as when i build.. i won't be able to open up that ipAddress.json file anymore because the file was condensed in the build process. – user1189352 Aug 21 '19 at 19:16
  • You can try reading the file from an external source? Like from a s3 storage service when your app first loads and then saving it to your state or localstorage. – Rohit Kashyap Aug 21 '19 at 19:21
  • @RohitKashyap hm ya maybe i'll just have to do that..thanks for the suggestion – user1189352 Aug 21 '19 at 19:23
  • 1
    Why not make fetch call to get json data from that file instead? – Arturas Aug 21 '19 at 21:09
  • @Arturas that's actually what I ended up doing. I didn't realize that was another option. I found the information here https://stackoverflow.com/questions/46793310/fetch-local-json-file-from-public-folder-reactjs – user1189352 Aug 21 '19 at 21:40
  • for all you people who downvoted, i'd like to understand why? i see no reason to downvote this question as i legitimately had this problem – user1189352 Aug 21 '19 at 21:43

2 Answers2

1

If its just a json object you should be able to create a js file with the data inside a const object. Then export the const as a module.

New JS file to create:

const ipAddressJson = {
    ipAddress: "11.111.111.111"
};

module.exports = ipAddressJson;

Inside the file you want the json object:

import ipAddressJson from 'path-to-the-js-file-above';

https://codesandbox.io/embed/tender-bash-2hjei

Tristan Heilman
  • 278
  • 1
  • 4
  • 16
1

Why not put your JSON files into your project scope? For example, if you have created the react app using create-react-app, the src folder will be the default project scope.

Put your JSON files into some folder like src/data and simply:

import data from '../data/somefile.json

tsumit
  • 312
  • 2
  • 10
  • 17
    Because now the JSON is bundled in with the project, requiring you to rebuild every time it's changed. – beanaroo May 27 '20 at 22:48