1

Will importing local json/text like the following I have written below be async or sync in Create-React-App?

import SampleLocalJson from './sample/sampleJson.json'
2019
  • 81
  • 1
  • 1
  • 9
  • Why does the file need to be in json format? – nubinub Jan 28 '19 at 08:43
  • I need getting some constant data in text format with key value pair to add somewhere I want to by the use of a function that get this json file path, find key and return value. While I am using fetch or xmlHttpRequest, response will be HTML not json – 2019 Jan 28 '19 at 08:45
  • If the point is to get some constants, why you don't use a simple js file that exports that constant ? – nubinub Jan 28 '19 at 08:48
  • Becasue I am going to use code splitting that fetch json whenver is needed. I don't want to put this json file in bundle to keep it as light as possible. – 2019 Jan 28 '19 at 08:50
  • Then you should definitely **not** import it. – nubinub Jan 28 '19 at 08:51
  • So, What should I do so. – 2019 Jan 28 '19 at 08:52
  • 1
    As the answers pointed it out, using import with your json file make that json part of your bundle as a static ressource. You are most likely wanting to use some xmlHttpRequest to get the json file which would be served by a web server, maybe the same web server that is serving your frontend application or maybe a totally different web server, that is up to you. – nubinub Jan 28 '19 at 08:54
  • Therefore, there is no way to get content of local json/text file without server even using fs comes from nodejs – 2019 Jan 28 '19 at 08:57
  • Well your question was tagged with reactjs, using nodejs and fs you can clearly get the content of a local json file. – nubinub Jan 28 '19 at 08:59
  • Well, as far as I know using fs only works in back-end side not front-end. Is there any way to do that in front-end (Reactjs) using require fs from 'fs' and ... without establishing a server? – 2019 Jan 28 '19 at 09:00
  • Well since front-end application does mean that the code is running on the client side, the local you are referring to is not your local, and therefore that file won't be available to him. Since it is not available to him, you need to find a way to serve that file to him. – nubinub Jan 28 '19 at 09:02
  • What about using javascript fileReader? Can I use it? – 2019 Jan 28 '19 at 09:03
  • The problem would still be the same, the client using the web application doesn't have that json file, so it's not possible for him to read it. – nubinub Jan 28 '19 at 09:04
  • What if I move json file to public folder while webpack is being bundling files and then fetch it? – 2019 Jan 28 '19 at 09:05
  • Yeah that's the solution I was referring earlier by saying your front-end web server can serve that json. But this is useful only if that json needs to change post build time, since this doesn't improve the size of your bundle... – nubinub Jan 28 '19 at 09:06
  • So, Shall I change webpack config to achieve this goal? and How I can do this? I am using React V16.6.3 and webpack 4.19.1. How would be the code in react to fetch data from public folder? – 2019 Jan 28 '19 at 09:09
  • Well the suitable answer clearly depends on how this file is going to change during your application lifecycle. Let's assume you have this lifecycle : build => deploy => run. If the file never changes, the `import`solution is probably the best, you might even want to consider making that file a constant export. If the file changes during the deploy phase, serving that file within the front-end web server is probably the right choice. If that files need to change during the run phase, then a different web server seems more appropriate. But that's totally my opinion. – nubinub Jan 28 '19 at 09:17

2 Answers2

0

This is handled by webpack during the build time. That JSON becomes part of your bundle file shipped to the browser.

Chmura
  • 21
  • 3
0

This depends on your environment. If you are using webpack >=v2.0.0 (which you probably do if the above line works) this will be done automatically by webpack json-loader during build time and is therefore sync.

If you are not on webpack >=v2.0.0 there can be multiple issues with directly importing json. Here is a good thread about it: How to import a json file in ecmascript 6?

UPDATE If you are interested in lazy loading the json, there is support for that built in to webpack. They have a good example in their documentation on that.

Leo
  • 1,592
  • 11
  • 14