Import JSON file in build folder instead js file

[ngocducdim]

Clear and concise description of the problem

• Hi, currently I create the json file called cbt.json and put it inside public folder which is imported like this:
  
  Example of cbt.json (this json file will update many times manually):
  

• When run npm run build the output folder contain cbt.json but the bundle js file does not load this cbt.json but it got hardcode inside js file:
  

• Because it hardcore like this if I modify cbt.json, the code won't affect, can help?

Suggested solution

I'm not sure

Alternative

Import json file dynamically instead hardcode when build

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

Converting to discussion as this is a question.

[sapphi-red]

If you want to load dist/cbs.json, you need to use fetch not import.

const res = await fetch('/cbs.json')
const data = await res.json()

[syahbes]

Thank you !

[kissu]

I'm not sure about that part tho

Assets in public cannot be imported from JavaScript.

Quite confusing regarding the wording. Which seems to be not clear enough to some people.

[sapphi-red]

@kissu I guess #9276 is related.

That part means assets in public cannot be imported from JavaScript. For example:

import foo from '../public/foo.json'

But actually it is possible as described in #9276.

[syahbes]

The solution that works for my issue was to put the json in the /public folder and fetch it with useEffect

useEffect(() => {
const getData = async () => {
fetch("/mappingSrc.js")
.then((response) => response.json())
.then((response) => {
dispatch(setRaw(response));
setGame(false);
dispatch(newGame());
})
.catch((err) => console.error(err));
};
getData();
}, []);