0

Can require be used in a typescript file in the web app to import a json file locally?

export function getData(id: string): string {
    const ids: string = id + 'something'; 
    const data = require(`./config/${ids}.json`);

    return JSON.stringify(data);
}
AlreadyLost
  • 767
  • 2
  • 13
  • 28
  • That depends entirely upon how you're building your web app from typescript source. I think we'll need some more information. – CollinD Jan 15 '22 at 00:01
  • can you elaborate a bit on it? I am not sure on what parameters it depends or what are the more info you need me to include? – AlreadyLost Jan 15 '22 at 00:04
  • 1
    Most (all?) browsers don't run typescript. In order to use typescript in a web app, you must transpile it somehow. The process that you use to transpile influences whether this is possible. For example, if using webpack or esbuild or parcel this is probably pretty easy. If just using `tsc` then maybe less-so and you might need to look into a bundler. – CollinD Jan 15 '22 at 00:05
  • Thank you, this is helpful. We use webpeck as a bundler. Is it possible with Webpack? will this work or I need to change or add something to webpack config? – AlreadyLost Jan 15 '22 at 00:06
  • Does this answer your question? [Importing JSON file in TypeScript](https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript) Also webpack docs say this just works out of the box. https://v4.webpack.js.org/loaders/json-loader/ Should just work I suppose? – CollinD Jan 15 '22 at 00:07
  • thanks, I am looking through that, this is helpful – AlreadyLost Jan 15 '22 at 00:58
  • do you think the first answer in this might work?https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript – AlreadyLost Jan 15 '22 at 01:18

1 Answers1

3

If you want a JSON string from a file at a relative address in the same origin as your web app, you can use this function:

TS Playground

export async function getJsonById(id: string):Promise<string> {
  const url = `./output/config/${id}something.json`;
  const json = (await fetch(url)).text(); // this is a string (JSON is a string)
  return json;
  // alternatively: to parse the JSON into a native JS data type
  // return JSON.parse(json);
}

// use:
const json = await getJsonById('id');
jsejcksn
  • 27,667
  • 4
  • 38
  • 62
  • awesome, didn't know that. Thank you. yes it is in the same origin – AlreadyLost Jan 15 '22 at 00:59
  • it seems it has this issue? https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working – AlreadyLost Jan 15 '22 at 01:01
  • @AlreadyLost Is this a React project? – jsejcksn Jan 15 '22 at 01:11
  • yes, it is a monorepo written mostly in react, the packages are used in a react app – AlreadyLost Jan 15 '22 at 01:12
  • See [this answer](https://stackoverflow.com/a/54344495/438273) at the question you linked me to. You need to put the JSON file(s) at that path relative to the `public` directory in your React app repo (e.g. `public/output/config`). That way, when you build the app, the JSON files will be located in the build directory at that path. – jsejcksn Jan 15 '22 at 01:13
  • oh I don't thinlk I can do that, the repo they have has a very defined structure \package\service\some-service\src\output ... – AlreadyLost Jan 15 '22 at 01:18
  • 1
    Then the problem is not with your React app, but with the server. If the files aren't at the address, then it means that the server isn't serving them at that address. You'll have to determine the address at which the JSON files are being served. – jsejcksn Jan 15 '22 at 01:20
  • is there a problem with using require in the app? – AlreadyLost Jan 15 '22 at 01:21
  • @AlreadyLost The "problem" is that you are trying to dynamically access the JSON. If your server isn't serving the JSON files, you'll have to statically include the JSON in your app at bundle time (which is a different question entirely). – jsejcksn Jan 15 '22 at 02:05