Encountering an error while trying to import JSON in TypeScript

I am in need of using mock JSON data to test the rendering of my front-end.

import MOCK_FAQ from '../../mocks/FAQ.json';

However, when attempting to import the file, I encountered this exception:

Cannot find module '../../mocks/FAQ.json'. Consider using '--resolveJsonModule' to import modules with '.json' extensions (2732)

I have already configured the necessary properties in my tsconfig file:

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": [
  "dom",
  "es6"
],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
  },
 "exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
 ]
}

Is there anyone who can provide assistance? o/

jsontypescriptmocking

Answer №1

To make it function properly, ensure that you have set "resolveJsonModule": true in your tsconfig.json file:

import * as MOCK_FAQ from '../../mocks/FAQ.json';

Alternatively, you can import the JSON file using a different method:

const MOCK_FAQ = require('../../mocks/FAQ.json');

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

What do I need to add to my code in order to receive a JSON response from the URL I am

I developed a custom Python client REST API wrap for an authenticated Okta pricing API. Although my code is functional, I am not receiving any response. My goal is to retrieve a JSON response, and I have considered using a print statement, but I am unsur ...

pythonjsonapi

Please explain the significance of the question mark in the statement `impliedTokenType: ?string`

Stripe elements have a question mark before the type in this GitHub repository: link The syntax I expected was impliedTokenType?: string, but it actually is impliedTokenType: ?string. Can someone explain the difference between the two? ...

reactjstypescript

Find keys in an array based on a specified value

I need to retrieve an array of keys from an object that match a specified value ...

javascriptarraystypescriptobjectecmascript-6

Visual Studio - Error TS1005 'Unexpected token'

After spending nearly 5 hours scouring the internet for a solution, I am still unable to resolve this persistent issue. The responses I've found so far do not seem to address the specific problem I'm facing. Although I have upgraded the tsc vers ...

typescriptvisual-studio

How to retrieve nested JSON data with a unique row name in each API response

I am facing an issue where I am trying to fetch specific cryptocurrency data from the CoinMarketCap API. To do this, I have utilized a Kotlin data class file generated by the JSON plugin that corresponds to the API response. The CMC API returns data in the ...

jsonapikotlinretrofit

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

Currently, I am facing a challenge in performing addition on currency prices stored as an array of objects. The issue arises from the fact that the currency type can vary among 3 different types within the array of objects. The main hurdle I encounter is ...

javascriptnode.jstypescript

Excessive alerts being produced within the loop

I am trying to remove a wine from a JSON wine list and I want to display an alert if the wine doesn't exist in the JSON file. However, the alert is popping up for every entry in the list. I am struggling to find a way to use an if statement before pro ...

javascriptjsonfor-loop

ActiveModel::UnknownAttributeError (attribute 'order_items_attributes' is not recognized by Order model.):

Can someone please assist with this problem? ActiveModel::UnknownAttributeError (unknown attribute 'order_itens_attributes' for Order.): Here is the code from my controller: def create @order = Order.new(order_params) if @order.save ...

ruby-on-railsarraysjsonruby-on-rails-4

Is it possible to access JSON with a numeric key and receive undefined as a result?

I've been attempting to extract information from my JSON data, but I keep getting an undefined result. Here is a snippet of my JSON: { "1": "A", "2": "B", "3": "C", "4": "D", "5": "E", "6": "F", "key":"pair" } This i ...

javascriptjson

Develop a JSON validator using Qt5

In my quest to create a JSON structure in Qt, I am struggling to find any examples or references for what I am aiming to achieve. { "ConfigFile": [ { "name": "Car", "valueName": "CarValue", "actual": { "actual": 140 ...

jsonqtqt5

Designing a dynamic carousel with AngularJS

Currently facing an issue with handling JSON data in AngularJS. When I select the 'img' object, it logs to the console but doesn't get applied to the scope. Can anyone provide some guidance on this? 'use strict'; angular.module(& ...

jsonangularjs

The TypeScript class for Date has a property that outputs a string

In my TypeScript code, I have defined a model class as follows: export class Season { ID: number; Start: Date; } Below is an example of how this model class is utilized within a component: export class SeasonsComponent { seasons: Season[]; sele ...

angulartypescriptprimeng

Error code 3840 in Objective C seems to indicate a problem with JSON parsing, despite the fact that the JSON code

After researching, it seems like this error could be attributed to faulty JSON data. However, I have double-checked my JSON: {"year":"2012","wheels":"Standard","trans":"Unknown"} Surprisingly, the JSON appears to be correct. I even validated it using JSO ...

iphoneobjective-cjson

Having trouble retrieving JsonArray data

FeedItem data=new FeedItem(); protected void parseData(JSONObject result) { try { JSONObject obj = result.getJSONObject("category"); JSONArray brandTitles = obj.getJSONArray("brand_title"); for (i ...

javaandroidjsonandroid-recyclerviewandroid-cardview

The field list contains an unidentified column named 'Test.computerIDComputerID'

I am currently navigating through the syntax of typeORM and have been stuck troubleshooting an issue for quite some time. It appears that whenever I utilize the find() function in typeORM, a query is generated with a duplicated column from a relation. Here ...

mysqltypescripttypeorm

Use angular-resource to add a new entry to the db.json file

I have a JSON file called db.json with the following structure: { "menu":[ { "id":0, "item":"item1" },{ "id":1, "item":"item2" },{ "id":2, "item":"item3" } ], "feedback":[] } Currently, I am using Angular's $resource to send a Jav ...

javascriptangularjsjsonrestangular-resource

The ESLINT_NO_DEV_ERRORS flag appears to be ineffective in my Typescript project

Currently, my project involves using the following tools: Yarn Typescript Create React App ESLint Make (Makefile) Fish shell During development, I encounter ESLint errors that prevent my project from compiling. To run my project, I use make run, which es ...

typescriptenvironment-variablescreate-react-appeslintyarnpkg

How to retrieve TypeScript object within a Bootstrap modal in Angular

Unable to make my modal access a JavaScript object in the controller to dynamically populate fields. Progress Made: Created a component displaying a list of "person" objects. Implemented a functionality to open a modal upon clicking a row in the list. ...

javascriptangulartypescript

Encountering a JavaScript toJSON custom method causing a StackOverflow error

Unique Scenario Upon discovering this answer, a new idea struck me - creating an object from a JSON literal. This led me to believe I could do the opposite using the handy JSON method: JSON.stringify(myObject). Curious, I proceeded as follows: function ...

javascriptjsonoopdesign-patterns

What is the process for transferring a JSON data object to the server with JavaScript XMLHttpRequest?

When I attempt to send an XMLHttpRequest to a PHP server, I am encountering difficulties in getting the $_POST or $_REQUEST object to be filled with the data I am sending using JavaScript: var r = new XMLHttpRequest; r.open("POST", "http://url.com", true ...

javascriptphpajaxjsonxmlhttprequest