What is the process for loading a JSON file using VueJS and Typescript?

I am facing an issue with loading a JSON file in my new VueJS project.

Reproduction / Issue

To easily reproduce the issue, I have created a Github repository: https://github.com/devedse/VueJSImportJsonFile

In the Home.vue page, I am trying to get the JSON loading to work. (https://github.com/devedse/VueJSImportJsonFile/blob/master/src/views/Home.vue)

When you open this solution in VSCode, the following line shows an error:

import theJson from '@/assets/hi.json';

https://i.sstatic.net/qvlFk.png 

Can't find module '@/assets/hi.json'

When running NPM Serve, the following error pops up: https://i.sstatic.net/OHjp3.png

What I've already tried

I have already searched on Stack Overflow and tried solutions from the following posts:

Importing json file in TypeScript

Typescript compiler error when importing json file

https://github.com/chybie/ts-json

Edit 1:

I have managed to get it to work when running npm run serve by adding this to the tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

However, the error in VSCode persists. Is there a way to fix this too?

javascripttypescriptvue.js

Answer №1

To enable JSON module resolution in TypeScript, simply include resolveJsonModule": true in the compilerOptions section of your tsconfig.json:

diff --git a/tsconfig.json b/tsconfig.json
index 499f5e2..a05dab1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,

Answer №2

To ensure that your tsconfig.app.json configuration file includes all necessary files for compilation, add the pattern "src/**/*.json" to the list of file patterns. Your configuration should resemble the following:


{
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "src/**/*.json" <----- this
  ]
}

For more information, visit: https://www.typescriptlang.org/tsconfig#include

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a default time on a p-calendar: A step-by-step guide

I am currently using the following p-calendar component in my webpage: <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" dateFormat="dd-mm-yy" [fo ...

angulartypescriptprimengp-calendar

A Guide to Catching Targeted React Notifications in Sentry using Next.js

In my Next.js application, I have implemented Sentry for error tracking. While I have successfully set up Sentry to capture errors within my try/catch blocks, I am currently struggling with capturing specific errors and warnings at a global level in my sen ...

reactjstypescriptnext.jssentry

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

javascripthtmldomdom-events

Modifying the response header in a node.js middleware: A step-by-step guide

I've been researching this question extensively on Google, but unfortunately, none of the solutions seem to work for me. The issue I'm facing is related to adding a specific property to the response header called "isAuth," which needs to be set ...

node.jstypescriptexpressmiddleware

Develop a carousel component using Vue.js

I'm currently working on a dashboard that needs to display cards, but I'm running into an issue. I want only four cards visible at a time, and when you click the arrow, it should move just one step to the next card. For example, if cards 1-4 are ...

javascripttypescriptvue.jsmethodscomputed-properties

Utilize the ref attribute when working with Material UI InputLabel components

Is there a way to access the ref parameter of an InputLabel from the @material-ui/core library using TypeScript? When I attempt to do so, the following code produces an error related to ref: TS2769: No overload matches this call. export class ComboBo ...

reactjstypescriptmaterial-ui

"Encountering errors during npm installation due to a failed preinstall

Having identified security vulnerabilities for knexnest > knex > minimist, I encountered an issue where the minimist version did not update using npm audit fix or a simple npm update. Following the steps outlined in this informative article resolved ...

javascriptnpmnpx

Using sql.js to import CSV files into SQLite databases

Is it possible to import a CSV file into a SQLite database using JavaScript instead of the command line? I am currently utilizing the sql.js library to work with SQLite in Javascript. I appreciate any help or suggestions on how to accomplish this task. Th ...

javascriptdatabasecsvsqlite

Is it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

Apologies for the unclear question, but here is my query... I recently began using Ajax and encountered an issue with sending XMLHttpRequest in the background. I am facing problems with certain html special characters in the form data, especially the & ...

javascriptajaxpost

Display a container using Fancybox

With just a click of a button, I want to reveal a hidden div in an elegant box. Here's the code snippet that actually works: $("#btnForm").fancybox({ content: $("#divForm").html() }); However, after doing some research, it appears that this may not ...

javascriptjqueryfancybox

Exploring an array of JSON data with HandlebarsJS and BackboneJS

My goal is to showcase a collection of music artists organized by the first letter of their name. This is how I have set up my Backbone View: function (App, Backbone, utils) { // Define a new module. var AllArtists = App.module(); // Create ...

javascriptjsonbackbone.jshandlebars.js

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

I am currently working on multiple micro SPAs that exist independently within an Express environment. I am facing a challenge with importing a global CSS file that is located outside of the apps, as it is not being recognized. The use of @import url(asset ...

javascriptcssreactjsexpress

Employing ng-show and other related features within directive "A"

After browsing through similar inquiries, I am still unable to comprehend the solution. If I have a directive available at this link: http://pastebin.com/QtAzGv62 and now need to incorporate the functionality of "ng-show" (or any other standard angular di ...

javascriptangularjsangularjs-directive

Using TypeScript and React: Implementing interfaces based on props conditions

I am currently designing a component that must either receive a prop named text or children, but not both or neither. ✓ Allow <NotificationBar text="Demo"/> <NotificationBar>Demo</NotificationBar> ✗ Disallow <NotificationBar/&g ...

reactjstypescript

The alert() function in PHP does not function as expected and instead prints to the console

My attempt to display an alert is not working and I'm not sure what I might be missing. Can someone please help me pinpoint the issue? //my.php if(mail($to, $subject, $message, $headers)) { $message = "Mail sent."; echo "<script type=&apo ...

javascriptphp

Converting a string to a number, even if it contains non-numeric

Is there a built-in function that can directly convert a string containing non-numeric characters to a number in JavaScript, without the need for using str.substring() followed by parseInt()? For instance, how can I efficiently convert the string x1 to th ...

javascript

Top method for managing missing sub-documents in MongoDB query outcomes

I've seen this question asked in various forms before, but I'm seeking the most efficient way to manage query results without relying on multiple if statements. Imagine I need to locate a product (sub-document) within a package (document) Packa ...

javascriptnode.jsmongodbmongoose

Nightwatch execute() function not technique following anticipate

After reviewing the documentation, I am confident that this code should work correctly. However, I am encountering an issue where something needs to run once the expect has finished, but it doesn't seem to be functioning as expected. Functioning Code ...

javascriptseleniumtestingnightwatch.js