Now when we have moved from using just static html, css and js to including a build step through ViteJS we are sitting with two different sets of APIs, for things that are running in the browser we have access to the Web APIs and in the build step we have access to the Node APIs.
import content from "../verses.json" assert {type: "json"} you are doing here is part of how the browser treats import statement, but this line is actually executed as part of the build stage which is a node environment.
Keeping track of the context of where our code is being executed is a part of working with larger systems. I suggest you take some time to read up on how the build process is done to get a broader understanding of what is actually happening. This article about the build process is a good first step.
https://github.com/tordvb10/first-react-project-tordvb10-moduleD/blob/ac34ec81e89ab6006373b745f24a3f7285358493/src/scripturesFetch.js#L1
Now when we have moved from using just static html, css and js to including a build step through ViteJS we are sitting with two different sets of APIs, for things that are running in the browser we have access to the Web APIs and in the build step we have access to the Node APIs.
import content from "../verses.json" assert {type: "json"}you are doing here is part of how the browser treats import statement, but this line is actually executed as part of the build stage which is a node environment.Keeping track of the context of where our code is being executed is a part of working with larger systems. I suggest you take some time to read up on how the build process is done to get a broader understanding of what is actually happening. This article about the build process is a good first step.